Question

我正在尝试使用 bootstrap4轮播进行两个步骤：

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

我想在通过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();
    }
})

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

如果启用了自动循环，这也可以让您暂停旋转木马，因为它不会在以后的幻灯片功能中自动恢复（参见here）。

请参阅here获取示例（JSFiddle）。

Answer 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
}

}）

bootstrap4 carousel - 停止滑动＆＃39; slide.bs.carousel＆＃39;事件

2 个答案: