bootstrap4 carousel - 在“slide.bs.carousel”事件中停止幻灯片答案

【问题标题】：bootstrap4 carousel - stop slide in 'slide.bs.carousel' eventbootstrap4 carousel - 在“slide.bs.carousel”事件中停止幻灯片
【发布时间】：2017-06-22 18:06:21
【问题描述】：

我正在尝试使用 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" 禁用了自动滑动。用户手动在幻灯片之间导航，即通过单击或箭头键。

【问题讨论】：

你能把剩下的代码贴出来吗？

标签： javascript carousel bootstrap-4

【解决方案1】：

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

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

请参阅 here 以获取来自 Bootstrap 源的相关位。

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

有关示例（JSFiddle），请参阅 here。

【讨论】：

【解决方案2】：

这样使用：

$('#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
}

})

【讨论】：