Preventing twitter bootstrap carousel from auto sl

问题:

So is there anyway to prevent twitter bootstrap carousel from auto sliding on the page load unless the next or previous button is clicked?

Thanks

回答1:

Or if you're using Bootstrap 3.0 you can stop the cycling with data-interval="false" for instance

<div id="carousel-example-generic" class="carousel slide" data-interval="false">

Other helpful carousel data attributes are here -> http://getbootstrap.com/javascript/#carousel-usage

回答2:

Actually, the problem is now solved. I added the 'pause' argument to the method 'carousel' like below:

$(document).ready(function() {      
   $('.carousel').carousel('pause');
});

Anyway, thanks so much @Yohn for your tips toward this solution.

回答3:

The problem with carousel automatically sliding after prev/next button press is solved.

$('.carousel').carousel({
    pause: true,
    interval: false
});

GitHub commit 78b927b

回答4:

if you're using bootstrap 3 set data-interval="false" on the HTML structure of carousel

example:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">

回答5:

• Use data-interval="false" to stop automatic slide
• Use data-wrap="false" to stop circular slide

回答6:

add this to your coursel div :

data-interval="false"

回答7:

Below are the list of parameters for bootstrap carousel. Like Interval, pause, wrap:

For more details refer this link:

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Hope this will help you :)

Note: This is for further help. I mean how you can customise or change default behaviour once carousel is loaded.

回答8:

I think maybe you should go to check the official instruction about carousel, for me, i have not found answer above, because of multiple versions of bootstrap, I'm using b4-alpha and i want the autoplay effect stop.

$(document).ready({
    pause:true,
    interval:false
});

this script does not make any effect while mouse leave that page, exactly carousel area. go to official definition and find those :

So you will find why.if carousel page onmouseover event triggered, page will pause, while mouse out of that page, it'll resume again.

So, if you want a page stop forever and rotate manually, you can just set data-interval='false'.

回答9:

--Use data-interval="false" to stop automatic slide --Use data-wrap="false" to stop circular slide

...

回答10:

For Bootstrap 4 simply remove the 'data-ride="carousel"' from the carousel div. This removes auto play at load time.

To enable the auto play again you would still have to use the "play" call in javascript.