5

我在这里实现了 Twitter Bootstrap 的 Carousel jQuery 插件：http: //zarin.me/circlefive/dashboard.html（请参阅响应选项卡）

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

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

谢谢！

4

2 回答 2

3

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

在Issue #1887 @fat中提出了他的建议，以防止它首先被卡住：

“您需要在切换显示之前/之后暂停幻灯片并继续播放。”

我还在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插件代码中。如果有人认为这是一个好主意，或者对如何实现它有其他想法，那么这个问题仍然是开放的，所以欢迎反馈。

于 2012-09-13T00:44:51.887 回答
0

如果您在 chrome 中检查轮播的行为，您可以在更改选项卡时轮播仍在运行。

并且由于轮播不在活动选项卡中，因此将 adisplay: none;应用于轮播的父 div。这可能是您的问题的原因。（你最终像截图一样）

我认为可以通过在显示与选项卡相关的内容之前.carousel('pause')单击第 3 个选项卡和.carousel('cycle')最后一个选项卡时触发来修复它。

轮播卡住了

于 2012-07-20T22:08:46.403 回答