jQuery Carousel Stuck（Twitter Bootstrap）

Question

我在这里实现了Twitter Bootstrap的Carousel jQuery插件： http://zarin.me/circlefive/dashboard.html（请参阅回复标签）

旋转木马通常起作用，但偶尔会卡住。当您与其他选项卡交互，然后使用响应选项卡时，尤其会发生这种情况。我认为这与标签有关..

有谁知道为什么旋转木马卡住了？

谢谢！

Answer 1

问题与@Francesco Frassinelli在评论中指出的一样，即当轮播使用CSS3过渡时（基本上是任何浏览器而不是IE），如果过渡结束时隐藏轮播，{{{事件永远不会被触发。这将导致轮播在滑动状态下暂停，并使其所有功能短路。

在Issue #1887 @fat <​​/ strong>提出了防止它被卡在第一位的建议：

  

“您需要暂停幻灯片放映并在切换显示屏之前/之后恢复。”

我还建议在Issue #3351中使用模式中的转盘时的解决方法，这可以很容易地适应您的用例：

$.support.transition.end

这基本上只是在旋转木马变得可见时才会解锁旋转木马。

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

Answer 2

如果你在镀铬中检查转盘的行为，你可以在转换标签时仍然可以使用转盘。

由于轮播不在活动标签中，display: none;将应用于轮播的父div。这可能是您的问题的原因。 （你最终会像截图一样）

我认为可以通过在显示与标签相关的内容之前点击第一个标签上的第一个标签.carousel('pause')和最后一个标签上的.carousel('cycle')来触发{{1}}。