Linking to specific slides in a bootstrap carousel

Report · Nov 09, 2016

I am trying to link from an image on one page to a specific slide in a bootstrap carousel on another page. What is the bast and simplest way to go about this?

Report · Nov 09, 2016

You need to send a URL variable for the slide number (where 0 is the first slide) like

<a href="myslidepage.html?slide=2" class="btn btn-info>More …</a>

Then in myslidepage.html read the variable and assign to the constructor.

$(document).ready(function(){
$('#myCarousel').carousel(window.location.hash.substring(1));
});

where #myCarousel is the ID that you have given the carousel.

Wappler, the only real Dreamweaver alternative.

Report · Nov 09, 2016

Thank you Ben.

Where do I insert the second page code you have provided? In the original formatting of the Carousel?

I.E. :

$(document).ready(function(){

$('#myCarousel').carousel(window.location.hash.substring(1));

});

</div>

Or at the end of the page?

Report · Nov 09, 2016

You need to keep in mind that I am not in any way conversant in coding

Report · Nov 09, 2016

Because the code is JavaScript, you will need to enclose it in appropriate tags like

<script>
$(document).ready(function(){
$('#myCarousel').carousel(window.location.hash.substring(1));
});
</script>

Although it does not matter where you place this in your document, I tend to have all of my scripts at the bottom of my document and well just above the ending body tag (</body>)

Wappler, the only real Dreamweaver alternative.

Report · Nov 09, 2016

Ok, so I am doing something wrong. The page code is fine with the second sorting script, but the link reference for some reason will only return me to the first slide of the carousel, irrespective of the slide number entered. I found this problem when I tried to use named anchors as well. What am i doing wrong?

Report · Nov 09, 2016

For your reference, this is the code from the links page:

This is the code from the carousel page:

$(document).ready(function(){

$('carousel1').carousel(window.location.hash.substring(1));

});

</script>

Report · Nov 10, 2016

Sorry for the delay, going through a very busy period.

Please have a look at the following working example.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="carousel1" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
  <li data-target="#carousel1" data-slide-to="0" class="active"></li>
  <li data-target="#carousel1" data-slide-to="1"></li>
  <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
  <div class="item active"><img src="images/Carousel_Placeholder.png" alt="First slide image" class="center-block">
  <div class="carousel-caption">
  <h3>First slide Heading</h3>
  <p>First slide Caption</p>
  </div>
  </div>
  <div class="item"><img src="images/Carousel_Placeholder.png" alt="Second slide image" class="center-block">
  <div class="carousel-caption">
  <h3>Second slide Heading</h3>
  <p>Second slide Caption</p>
  </div>
  </div>
  <div class="item"><img src="images/Carousel_Placeholder.png" alt="Third slide image" class="center-block">
  <div class="carousel-caption">
  <h3>Third slide Heading</h3>
  <p>Third slide Caption</p>
  </div>
  </div>
  </div>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script>
$(document).ready(function(){
function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
    var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
    if (Math.floor(slide) == slide && $.isNumeric(slide))
        return parseInt(slide);
    else
        return 0;
}
$('#carousel1').carousel(qs('slide'));
});
</script>
</body>
</html>

Wappler, the only real Dreamweaver alternative.