Bootstrap JavaScript Carousel Doesn't Stop Cycling

Question

Twitter Bootstrap Version: 2.0.3

Example HTML code:

Answer 1

To disable cycling, one working solution is to add data-interval="false" to the carousel container:

<div id="myCarousel" class="carousel slide" data-interval="false">
    <div class="carousel-inner">
        <div class="active item">toto</div>
        <div class="item">tata</div>
        <div class="item">tutu</div>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>                                                                        
</div>

Answer 2

I think @dgabriel's answer should work, because :

bootstrap carousel's pause() method doesn't treat its argument the way you think it does. pause(true) doesn't mean "yes, pause it", nor does pause(false) mean "no, don't pause it".

it can be seen in the source code,

Carousel.prototype.pause = function (e) {
  e || (this.paused = true)
  ...
  this.interval = clearInterval(this.interval)

  return this
}

github link here

as can be seen, if e is true, this.paused = true won't execute. so when event "mouseleave" fires, cycle() method still see "paused == false" and setInterval is executed again, so your carousel won't stay still.

// mouseleave event fires using cycle() with no arguments
.on('mouseleave', $.proxy(this.cycle, this))

// so when cycle() is called, this.paused == false.
Carousel.prototype.cycle =  function (e) {
  e || (this.paused = false)

  this.interval && clearInterval(this.interval)

  // set interval == false to prevent setInterval
  this.options.interval
    && !this.paused
    && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))

  return this
}

to pause, use .pause() and interval=false to prevent "mouseleave" event to recycle. bootstrap itself uses it this way, it can be seen here

Answer 3

Actually, changing the defaults in bootstrap-carousel.js as follows helped me.

Carousel.DEFAULTS = {
    interval: false,
    pause: 'hover',
    wrap: false
  }

Answer 4

I tried everything, but nothing worked. I solved the issue in changing files bootstrap.min.js & bootstrap.js. You have to looking for "carousel.defaults" with Ctrl+F in these files and replace what it contains by:

interval:false 

Answer 5

I just came up with a solution for this issue. None of the above worked for me, but it did get me to look at the bootstrap code. I believe the reason for this bug is in the bootstrap-carousel.js file in the defaults object:

  $.fn.carousel.defaults = {
    interval: 5000
  , pause: 'hover'
  }

After the carousel slides, it ends up reverting to these default values. If you want the carousel to not slide and only be controlled by the user, you can change the defaults object to have an interval of false. Hope this helps.

  $.fn.carousel.defaults = {
    interval: false
  , pause: 'hover'
  }