javascript - bootstrap4 carousel - 在 'slide.bs.carousel' 事件中停止滑动

Question

我尝试使用 bootstrap4 carousel 执行两个步骤:

• 第一个轮播项目用于身份验证(用户名和密码字段)
• 第二个用于授权(列出用户有权访问的组并要求他选择一个)

我想在通过 JavaScript 代码移动到下一张幻灯片之前检查用户 ID 和密码是否有效。我有 .carousel('pause') 但我无法阻止移至下一张幻灯片。另外，我不想有一个额外的按钮来检查内容。

$('#myCarousel').on('slide.bs.carousel', function (e) {
    // authentication check here

    if (isAuth === false) 
    {
        // stay on this slide
    }
    else
    {
        // move the next one
    }

})

有什么办法可以做到这一点吗？

注意:我通过设置 data-interval="false" 禁用了自动滑动。用户手动在幻灯片之间导航，即通过单击或使用箭头键。

Answer 1

要在触发 slide.bs.carousel 事件后停止幻灯片，请对事件变量调用 preventDefault()。这适用于自动和手动触发的幻灯片事件。

$('#myCarousel').on('slide.bs.carousel', function (e) {
    // checks here        
    if (stop) {
        e.preventDefault();
    }
})

参见here来自 Bootstrap 源的相关位。

如果您启用了自动循环，这还允许您暂停轮播，因为它不会在稍后的幻灯片功能中自动恢复(请参阅 here )。

参见here举个例子(JSFiddle)。