Bootstrap JavaScript Carousel Doesn't Stop Cycling

Question

Twitter Bootstrap Version: 2.0.3

Example HTML code:

Answer 1

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