Menu
Twitter Bootstrap Version: 2.0.3
Example HTML code:
<!DOCTYPE html> <html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"> <head> <link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" /> <script type="text/javascript"> $(document).ready(function() { $('.carousel').each(function(){ $(this).carousel({ pause: true, interval: false }); }); }); </script> <script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </body> </html> CSS: Provided with bootstrap.css
Problem: As you can see, I've enabled paused mode, and disabled cycling. But when I click the carousel's left or right controls, the carousel starts cycling at the default interval (5 seconds per cycle) on mouseleave.
How do I forcefully disable cycling? I want the images to be cycled manually by the user.
You can test the problem live on my test site here.
837
Now, the first way to stop the autoplay is by just removing the attribute data-ride=”carousel” from the code above. $( '. carousel' ). carousel( 'pause' );
$('. carousel'). carousel({ interval: false, }); That will make the auto sliding stop because there no Milliseconds added and will never slider next.
You'll need to call the pause function like this: $("#myCarousel"). carousel('pause'); . This is how all methods are called on bootstrap components, following the jQuery UI convention. You can restart the carousel by listening to the blur event then calling the cycle method.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
You might want to try removing the "pause" attribute. It's not necessary if you are not automatically cycling through the images. My assumption (and I'm going to look at the bootstrap code to verify) is that when the "mouseleave" event fires, the cycling resumes -- even if it was turned off in the first place. When it resumes, it uses the default speed.
Here is a solution:
$(function() { $('.carousel').each(function(){ $(this).carousel({ interval: false }); }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
