Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preventing twitter bootstrap carousel from auto sliding on page load

People also ask

How do I make bootstrap carousel not slide automatically?

$('. carousel'). carousel({ interval: false, }); That will make the auto sliding stop because there no Milliseconds added and will never slider next.

How do I stop bootstrap carousel from sliding?

Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.

How do I stop carousel from moving automatically?

To turn off the autoplay set data-interval="false" to the carousel element.

How do I stop hover on carousel?

The data-pause attribute pauses the carousel from going through the slides when the mouse pointer enters the carousel. In this example, we have set pause to "hover" (default), which will stop the slide when your mouse pointer enters the carousel.


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


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.


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

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

GitHub commit 78b927b


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

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