【问题标题】:Bootstrap 3 gallery auto slide activating after modal opens?模式打开后,Bootstrap 3画廊自动滑动激活?
【发布时间】:2015-08-07 17:56:39
【问题描述】:

我正在使用 Bootstrap 3,我在主页上有一个画廊和一个模式。我使用以下方法禁用了图库上的自动幻灯片:

function galleryCarousel() {
        $ub('.carousel').carousel({
        pause: true,
        interval: false       
    })
};

我唯一的问题是当有人单击按钮以调出模态框时,图库突然又开始自动滑动,并且会一直持续到您关闭模态框为止。奇怪的是,只有在您单击转到图库中的第二张图片后才会发生这种情况,它会再次开始自动滑动。

我尝试了多种方法来解决此问题,但均无济于事。

您可以在此处查看原型:http://copy-writer-otter-74032.netlify.com/

只需将图库前进到下一张幻灯片,然后单击页面底部的“个人资料”按钮以调出模式 - 等待几秒钟,然后观看图库再次开始自动滑动。

【问题讨论】:

    标签: javascript jquery twitter-bootstrap css


    【解决方案1】:

    问题是您已经使用数据属性初始化滑块。这意味着应用了默认滑块。它似乎不是自动的原因是因为默认情况下将鼠标悬停在滑块上时滑块不会移动。打开模态框后,滑块不会悬停,它将开始移动。只需将鼠标放在标题上,或打开其中一个下拉菜单,您就会看到它开始移动。

    简单的解决方案是将data-interval="false" 添加到您的滑块元素中。这也意味着您可以删除该 javascript。

    看看我创建的演示。
    没有数据属性:http://codepen.io/anon/pen/rVRaeR
    带数据属性:http://codepen.io/anon/pen/JdzoKj

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-27
      • 1970-01-01
      • 1970-01-01
      • 2022-01-02
      • 2022-06-12
      相关资源
      最近更新 更多