javascript - Start From Specific Slide in Bootstrap Carousel

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="" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="" 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.

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./examples/carousel/#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="http://getbootstrap./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.

Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Oct 6, 2014 at 15:46 Michael 3762 gold badges5 silver badges13 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

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">

As in this demo:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn./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>

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 .carousel(index) with the zero based index of the side you want to navigate to like this:

$('#myCarousel').carousel(1);

$(function() {
  $('#myCarousel').carousel(1);
});

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn./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>

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

need to say I'm a newbie in this, and I'm using Mobirise as a support. That being said, what I haven't found (or haven't understood) in your answers is how to create a link to open a specific slide, user end, maybe adding something at the end of the url? I created a bootstrap carousel sample with mobirise for you to check out. gallery link

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Start From Specific Slide in Bootstrap Carousel - Stack Overflow

2 Answers 2

Working Demo in Plunker

与本文相关的文章

评论列表(0)