Preventing twitter bootstrap carousel from auto sl

Question

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

Answer 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

Answer 2

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.

Answer 3

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'.

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

Answer 5

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.

Answer 6

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

...