Linking to specific slides in a bootstrap carousel

Forum|Forum|9 years ago
November 10, 2016
1 reply
14902 views

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?

This topic has been closed for replies.

Correct answer BenPleysier

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>

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>