jQuery Carousel Stuck (Twitter Bootstrap)

问题

I've implemented Twitter Bootstrap's Carousel jQuery plugin here: http://zarin.me/circlefive/dashboard.html (see the responses tab)

The carousel usually functions, but occasionally gets stuck. It especially happens when you interact with the other tabs and then using the responses tab. I think it has to do with the tabs..

Does anyone know why the carousel is getting stuck?

Thanks!

回答1:

The issue is along the lines of what @Francesco Frassinelli pointed out in the comment, namely that when the carousel is using CSS3 transitions (basically any browser but IE), if a carousel is hidden when a transition ends, the $.support.transition.end event is never fired. This will cause the carousel to get suspended in the sliding state and short-circuit all it's functionality.

In Issue #1887 @fat threw in his suggestion for preventing it from getting stuck in the first place:

"You'll need to pause the slide show and resume it before/after toggling the display."

I also suggested a workaround for when using a carousel in a modal in Issue #3351, which could easily be adapted for your use case:

$('a[href="#responses-1"]').on('shown', function () {
    var $carousel = $('.carousel');

    if ($carousel.data('carousel') && $carousel.data('carousel').sliding) {
      $carousel.find('.active').trigger($.support.transition.end);
    }
});

This basically just unlocks the carousel when it becomes visible if it happens to be suspended.

Since this poor behavior occurs across many differently scenarios, I made a suggestion in Issue #3351 as to the feasibility of a potential permanent solution which could be integrated directly into the bootstrap-carousel.js plugin code. If anyone thinks that is a good idea, or have other ideas as to how to accomplish it, that issue is still open, so feedback is welcome.

回答2:

If you inspect the behaviour of the carousel in chrome you can the carousel if still running when you change tab.

And because the carousel is not in the active tab a display: none; is applied to parent div of the carousel. This may be the cause of your problem. (you end up like the screenshot)

I think it can be fixed by triggering .carousel('pause') when clicking on the 3 first tab and .carousel('cycle') on the last tab before showing the content related to the tab.

来源：https://stackoverflow.com/questions/11585123/jquery-carousel-stuck-twitter-bootstrap