jQuery 轮播卡住(Twitter Bootstrap)

Question

我在这里实现了 Twitter Bootstrap 的 Carousel jQuery 插件: http://zarin.me/circlefive/dashboard.html (请参阅回复选项卡)

轮播通常可以正常工作，但偶尔会卡住。当您与其他选项卡交互然后使用响应选项卡时，尤其会发生这种情况。我认为这与选项卡有关..

有谁知道为什么轮播卡住了？

谢谢!

Answer 1

问题与 @Francesco Frassinelli 在评论中指出的一致，即当轮播使用 CSS3 转换时(基本上是除 IE 之外的任何浏览器)，如果轮播在转换结束时隐藏，则 $.support.transition.end 事件永远不会被触发。这将导致轮播暂停在滑动状态并使其所有功能短路。

在 Issue #1887 @fat 提出了他的建议，以防止它首先陷入困境:

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

我还在Issue #3351中的模态中使用轮播时建议了一种解决方法，可以轻松适应您的用例:

$('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);
    }
});

这基本上只是在轮播变得可见(如果碰巧被暂停)时解锁轮播。

由于这种不良行为发生在许多不同的场景中，我在 Issue #3351 中提出了建议关于可以直接集成到 bootstrap-carousel.js 插件代码中的潜在永久解决方案的可行性。如果有人认为这是一个好主意，或者对如何实现它有其他想法，那么该问题仍然悬而未决，因此欢迎反馈。