Geek Answers Handbook

How to change the carousel loading interval after its initialization

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

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

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

It should be noted that carousel initialization via JS does not set the data-interval on the carousel. I also searched a lot for this topic, but the results are all that people are trying to tune at a fixed speed. I want to change the speed after it is initialized.

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>
+5
source share
2 answers

This is not a supported option for changing speed after carousel initialization. However, this does not mean that it is impossible. Here is an example code that allows you to change parameters 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>
+9
source

Using the Bootstrap 4 carousel, you can get a link to its internal configuration and directly set the interval as follows:

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

Needless to say, these are pretty hacks.

0
source

More articles:


All Articles