Start Bootstrap Carousel paused?

Question

Extremely similar to this: Preventing twitter bootstrap carousel from auto sliding on page load except this is not working for me.

I have this kind of setup:

<div id="carousel-example-generic" class="carousel slide" 
    data-ride="carousel" data-interval="5000" data-wrap="1">
  <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
    </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
      <div class="item active">
    <a href="fg">      <img src="x" alt="Slide 0">
    </a>    </div>
      <div class="item ">
    <a href="sd">      <img src="x" alt="Slide 1">
    </a>    </div>
    </div>

    <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  </div>

With the JS:

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

But the slider still continues to automatically slide on page load. I cannot seem to get it so that it is paused on page load but slides automatically when used.

I have tried quite a few things like taking out data-ride (which stops it permanently) and changing the class to no avail.

Anyone know how to do this?

P.S: following that example in bootstrap carousel pause not working calling pause actually works, so this seems to be a problem with pause.

Did you set the data-interval to false in addition? Doing that will cause the slider to only advance when you click on the controls. Is that what you want to have happen? — jme11, May 29 '14 at 13:55
So what do you want to have happen exactly then? You want it to not cycle and then start cycling when? — jme11, May 29 '14 at 14:25

score 3 · Accepted Answer · answered May 29 '14 at 14:41

Remove the data-ride attribute from your example:

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

According to the doc at http://getbootstrap.com/javascript/#carousel:

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load.

Then, use 'cycle' to start your carousel when you want it to. Here I started it with a click event handler:

    $('.carousel').on('click', function() {
        $('.carousel').carousel('cycle');
    });

Start Bootstrap Carousel paused?

1 Answers1