How to change interval of a bootstrap carousel once it has been initialised

问题

According to the doco, using the following will set the carousel cycle speed:

$('.carousel').carousel({
  interval: 2000
})

However if you have already initialised the carousel, calling the above with a different interval has no effect.

I should note that initialising the carousel via JS doesn't set the data-interval on the carousel. I've also searched quite a bit on this topic, but the results are all about people trying to set up at a fixed speed. I want to change the speed once it's already been initialised.

The code is as follows:

$(function () {
    $('#homeCarousel').carousel({
        interval:2000,
        pause: "false"
    });
    $('#slowButton').click(function () {
        $('#homeCarousel').carousel({interval: 10000});
    });
    $('#fastButton').click(function () {
        $('#homeCarousel').carousel({interval: 1000});
    });
});

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

.item {
    color: white;
    background-color: black;
    width:100%;
    height: 350px;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
  <!-- Menu -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
    
  <!-- Items -->
  <div class="carousel-inner">
      
      <!-- Item 1 -->
    <div class="item active">
      <div class="container">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel Layout</h1>
          <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
          <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
        </p></div>
      </div>
    </div>
      
      <!-- Item 2 -->
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>Changes to the Grid</h1>
          <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>
      
      <!-- Item 3 -->
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>Percentage-based sizing</h1>
          <p>With "mobile-first" there is now only one percentage-based grid.</p>
          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
  <div id="carouselButtons">
      <button id="slowButton" type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-play"></span>
       </button>
      <button id="fastButton" type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-forward"></span>
      </button>
  </div>
</div>

回答1:

It's not a supported option to modify speed once the carousel is initialized. However, that doesn't mean that it cannot be done. Here is some sample code that enables you to change the options on the fly, including the interval

$(function () {
    $('#homeCarousel').carousel({
        interval:2000,
        pause: "false"
    });
    $('#slowButton').click(function () {
      c = $('#homeCarousel')
      opt = c.data()['bs.carousel'].options
      opt.interval= 10000;
      c.data({options: opt})
    });
    $('#fastButton').click(function () {
      c = $('#homeCarousel')
      opt = c.data()['bs.carousel'].options
      opt.interval= 1000;
      c.data({options: opt})
    });
});

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

.item {
    color: white;
    background-color: black;
    width:100%;
    height: 350px;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
  <!-- Menu -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
    
  <!-- Items -->
  <div class="carousel-inner">
      
      <!-- Item 1 -->
    <div class="item active">
      <div class="container">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel Layout</h1>
          <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
          <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
        </p></div>
      </div>
    </div>
      
      <!-- Item 2 -->
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>Changes to the Grid</h1>
          <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>
      
      <!-- Item 3 -->
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>Percentage-based sizing</h1>
          <p>With "mobile-first" there is now only one percentage-based grid.</p>
          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
  <div id="carouselButtons">
      <button id="slowButton" type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-play"></span>
       </button>
      <button id="fastButton" type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-forward"></span>
      </button>
  </div>
</div>

回答2:

Using the Bootstrap 4 carousel you can get a reference to its internal configuration and directly setting the interval like this:

const options = $("#myCcarousel").data()['bs.carousel']["_config"];
options.interval = 50;

Needless to say this is pretty hacky.

来源：https://stackoverflow.com/questions/30271054/how-to-change-interval-of-a-bootstrap-carousel-once-it-has-been-initialised

标签

javascript

twitter-bootstrap-3

carousel