CODEWITHSUNDEEP
jquerytabstwitter-bootstrapcarousel
zarinf
zarinf

Reputation: 717

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!

Upvotes: 5

Views: 3053

Answers (2)

merv
merv

Reputation: 76700

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.

Upvotes: 3

baptme
baptme

Reputation: 10092

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.

carousel stuck

Upvotes: 0

Related Questions