jQuery Carousel Stuck(Twitter Bootstrap)
我在这里实现了Twitter Bootstrap的Carousel jQuery插件:http: //zarin.me/circlefive/dashboard.html (参见响应标签)
旋转木马通常起作用,但偶尔会卡住。 当您与其他选项卡交互然后使用响应选项卡时,尤其会发生这种情况。 我认为这与标签有关..
有谁知道为什么旋转木马卡住了?
谢谢!
问题与@Francesco Frassinelli在评论中指出的一样,即当轮播使用CSS3过渡(基本上是任何浏览器而不是IE)时,如果过渡结束时隐藏轮播,则$.support.transition.end
事件永远不会被解雇。 这将导致旋转木马在滑动状态下暂停并使其所有function短路。
问题#1887 @fat提出了他的建议,以防止它被卡在第一位:
“你需要暂停幻灯片放映并在切换显示屏之前/之后恢复它。”
我还提出了一个解决方法,在问题#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); } });
这基本上只是在旋转木马变得可见时才解锁旋转木马。
由于这种不良行为发生在许多不同的场景中,我在问题#3351中提出了一个潜在永久解决方案的可行性,该解决方案可以直接集成到bootstrap-carousel.js插件代码中。 如果有人认为这是一个好主意,或者有关于如何实现它的其他想法,那么这个问题仍然是开放的,所以反馈是值得欢迎的。
如果您在chrome中检查轮播的行为,则在更改选项卡时,如果仍然在运行,则可以使用轮播。
并且因为轮播不在活动标签中,所以display: none;
适用于轮播的父div。 这可能是您的问题的原因。 (你最终像截图)
我认为可以通过在显示与选项卡相关的内容之前单击最后一个选项卡上的3第一个选项卡和.carousel('cycle')
来触发.carousel('pause')
来.carousel('cycle')
。
- Bootstrap carousel:如何同时滑动两个旋转木马滑块?
- 如何在Bootstrap 3 Carousel中输出当前幻灯片编号?
- 修改bootstrap轮播以同时显示多个幻灯片
- Bootstrap 4 Carousel Show 2 Slides Advance 1
- 猫头鹰Carousel 2随机function
- Skrollr.js插件不在Parallaxing内部Bootstrap Carousel – 提供小提琴
- 如何修改移动和标签的bootstrap轮播
- Owl Carousel 2 – 字幕div(img title&alt标签)
- 如何在旋转木马div之外放置Bootstrap Carousel图像标题?