bootstrap4 旋转木马 - 在 'slide.bs.carousel' 事件中停止滑动

Question

我正在尝试使用 bootstrap4 carousel 执行两个步骤：

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

我想检查用户 ID 和密码是否有效 ，然后 通过 javascript 代码转到下一张幻灯片。我有 .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

这样使用：

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

if (isAuth === false) 
{
   $('#myCarousel').carousel('pause');
   return false; // stay on this slide
}
else
{
   $('#myCarousel').carousel('cycle');
   return true; // move the next one
}

})

Answer 2

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

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

有关 Bootstrap 源中的相关位，请参阅 here。

如果您启用了自动循环，这也将允许您暂停轮播，因为它不会在稍后的幻灯片功能中自动恢复（参见 here）。

请参阅 here 示例 (JSFiddle)。

bootstrap4 旋转木马 - 在 'slide.bs.carousel' 事件中停止滑动

bootstrap4 carousel - stop slide in 'slide.bs.carousel' event

javascript

carousel

bootstrap-4