Question

我创建了一个导航菜单，用于控制轮播（自举）的幻灯片。

我设法让它完美运作。当我按下菜单按钮时，幻灯片会更改，菜单会重新滑入。

然而问题是它在同一时间执行操作并且看起来很奇怪。

我希望旋转木马幻灯片在菜单滑回后立即更改。

我怎么做到的？也许用jquery脚本？

感谢。

Answer 1

您正在寻找的内容要求在您的折叠元素完成隐藏之前，旋转木马不会滑动。我不建议使用计时器或延迟 - 而是使用引导事件来协调引导元素的隐藏和动画。

在您的轮播中，'slide.bs.carousel'事件处理程序（检查事件部分here）调用eventObject的preventDefault，以便不会发生幻灯片。

在你的collapse元素的'hidden.bs.collapse'事件处理程序（检查事件部分here）中调用$（'＃carousel'）。carousel（number）其中number是与菜单对应的幻灯片索引。

代码可能看起来像这样 -

var shouldSlide = false;
$('#carousel').on('slide.bs.carousel', function (e) {
    if (shouldSlide === false) {
        e.preventDefault();
    } 
});

$('#collapse').on('hidden.bs.collapse', function (e) {
    shouldSlide = true;
    $('#carousel-example-generic').carousel(3)
});

当然，上面的代码并不是一个完整的工作示例 - 您需要在两个事件处理程序之间进行协调，以确保一切按预期工作。希望这会有所帮助。

菜单关闭后，Bootstrap Carousel会滑动更改

1 个答案: