Carousel - pausing while sliding (during transition) breaks the pause/resume control

[sn3p]

Pausing the carousel while sliding / during transition breaks the pause/resume control.
This happens when:

• hovering (mouseenter) during transition.
• calling .carousel('pause') during transition.

From this point on the carousel keeps cycling and there's no way stopping/pausing it anymore. Not on hover/mouseenter and not even with .carousel('pause').

Anyone else experiencing this problem, and maybe found a workaround?

http://jsfiddle.net/ANfXq/1/

[Yohn]

I'm playing with the carousel now and discovered this problem to.. from what I can see it only happens with you hover over the carousel while its in the middle of a slide, so before it gets done sliding..

it also happens on the example page - http://twitter.github.com/bootstrap/examples/carousel.html

[sn3p]

@Yohn, thanks for confirming.
I've updated my bugreport because the problem not only occurs on mouseenter, but also when calling .carousel('pause'). It indeed happens only while sliding/during transition.

This problem is easy to reproduce by calling the next and pause methods right after each other:
$('.carousel').carousel('next').carousel('pause');

UPDATE
The problem seems to be caused by the pause method, in bootstrap-carousel.js at line 71:

if (this.$element.find('.next, .prev').length && $.support.transition.end) {
  this.$element.trigger($.support.transition.end)
  this.cycle()
}

What's the logic in resuming cycle when it's just told to pause?
Why not finish the current transition and then pause (aka remove the code above)?

[andreif]

Removing this.cycle() solved the problem for me. See also a 6-month old thread on the issue: 555a3b0#commitcomment-1409450

[thelittlebug]

I also can see that the actual slide is removed if you hover in between a transition. This gives a not so nice flickering.
I have remove this whole piece of code, and now every problem is gone.

if (this.$element.find('.next, .prev').length && $.support.transition.end) {
  this.$element.trigger($.support.transition.end)
  this.cycle()
}

But i just wonder what's this piece of code for? :)

[Yohn]

@andreif you want to submit a pull request removing this.cycle() from the pause function? I just did a lot of testing with it and everything seems to work correctly, including calling .carousel('pause')

[fat]

think this was resolved

[Yohn]

@fat this has been resolved with the clear interval -> a866a51 I was testing it yesterday and couldnt find anymore of the carousel bugs that were popping up

[prionkor]

So, what should i change in the code? I am currently working on a bootstrap project I would like to fix it before i put the site on production.