文章/答案/技术大牛

发布

社区首页 >问答首页 >bootstrap4旋转木马-在“slide.bs.carousel”事件中停止幻灯片

问bootstrap4旋转木马-在“slide.bs.carousel”事件中停止幻灯片
EN

Stack Overflow用户

提问于 2017-02-05 20:29:15

回答 2查看 4K关注 0票数 2

我试着用bootstrap4 carousel做两个步骤

第一个旋转木马项目是为authentication (它的用户名和密码字段)
第二个是用于授权(列出用户可以访问的组并要求用户选择一个)

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

javascript

carousel

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-14 18:30:28

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

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

有关引导程序源代码中的相关位，请参见这里。

如果启用了自动循环，也将允许暂停旋转木马，因为它不会在稍后的幻灯片函数中自动恢复(请参阅这里)。

有关示例，请参见这里 (JSFiddle)。

票数 2

Stack Overflow用户

发布于 2017-05-11 12:53:46

使用这种方式：

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

})

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42056936

复制

相似问题

问bootstrap4旋转木马-在“slide.bs.carousel”事件中停止幻灯片
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap4旋转木马-在“slide.bs.carousel”事件中停止幻灯片EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap4旋转木马-在“slide.bs.carousel”事件中停止幻灯片
EN