Start From Specific Slide in Bootstrap Carousel

Profile picture for Michael
Michael

So I've read through this question, but I'm still having trouble implementing the code. I've copied that javascript exactly into my custom.js file, and it said my HTML code wouldn't need to be modified. However, it still isn't working. What do I need to change?

Relevant portions of HTML file:

<!-- Nav bar -->

<ul class="dropdown-menu" role="menu">
    <li><a href="project1.html?slide=0">Project 1</a></li>
    <li><a href="project1.html?slide=1">Project 2</a></li>
    <li><a href="project1.html?slide=2">Project 3</a></li>
</ul>



<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item">
      <img src="img/Project1.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item active">
      <img src="img/Project2.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="img/Project3.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- /.carousel -->

I notice that the second slide has an active class, but removing that just breaks the carousel.

In order to manually set the active class in HTML, you just need to add the active class to the following elements:

  • <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
  • <div class="item active"> <!-- for slide 2 -->

As in this demo:

<!-- begin snippet: js hide: true --> <!-- language: lang-html --> 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item">
      <img src="https://picsum.photos/800/300?image=1" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item active">
      <img src="https://picsum.photos/800/300?image=3" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/800/300?image=4" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<!-- end snippet -->

However, doing so will not persist across page refreshes. Or at least certainly won't do so in a dynamic way. If you're going to load the active slide with Javascript, then you don't need to fuss around with manually setting the active class. Just call the <code>.carousel(<i>index</i>)</code> with the zero based index of the side you want to navigate to like this:

$('#myCarousel').carousel(1);
<!-- begin snippet: js hide: true --> <!-- language: lang-js --> 
$(function() {
  $('#myCarousel').carousel(1);
});
<!-- language: lang-html --> 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://picsum.photos/800/300?image=1" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/800/300?image=3" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/800/300?image=4" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<!-- end snippet -->

The million dollar question is how can you get the javascript above to run on page load.

The answer to that depends on how you're configuring your links and your site. For this particular case, you need to pass carousel an integer and the search property always returns a string, even if it's a numeric set of digits. Therefore, you should use the new and improved answer to your linked question:

$(function(){

    function getParameterByName(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;
    }
    
    var slideNumber = getParameterByName('slide');

    $('#myCarousel').carousel(slideNumber);
});

Assuming your are going to pass in a query string like ?slide= then that information should be available in the window.location.search property.

Neither StackSnippets or jsFiddle seem to pass the location.search. But here's a plunker that demontrates this working:

Working Demo in Plunker

Which you can see working at this address:

http://run.plnkr.co/plunks/WeBsDkRLFop0oY3wHwQY/index.html?slide=1