Bootstrap 3:关闭模态后禁用模态窗口中的轮播

时间:2014-08-01 22:52:12

标签: jquery twitter-bootstrap bootstrap-modal

我在模态窗口中有一个旋转木马。 单击缩略图图像时,弹出模式并显示相应的轮播项目,触发整个轮播。 我的问题,一旦模态窗口关闭,旋转木马仍在继续,循环通过所有图像。如果再次单击缩略图图像,则会显示模式,但会出现2个图像,一个堆叠在另一个上面。 我理解为什么会发生这种情况,我在点击缩略图时动态添加“活动”类。所以第二次启动轮播时,两个图像都有“活动”类。

我想知道是否有办法彻底停用旋转木马。 如果我尝试删除“活动”类,javascript会从Bootstrap轮播函数抛出错误,“无法读取未定义的属性'切片'”。 我尝试用“interval:false”调用轮播功能,但无济于事。

这是我用来调用模态和轮播的代码:

$("#info a").click(function(){
    var thumb = $(this).data('id'); //Get the ID of the thumbnail clicked
    //add class "active" to the corresponding carousel item
    $('#infoCarousel div[class*="item"]').each(function(i){
        if(i == thumb){
            $(this).addClass('active');
        }
    });
    $("#carouselModal").modal('show');//Show the modal window
    //Start the carousel with the proper item
    $("#carouselModal").on('show.bs.modal', function(e){
        $('#infoCarousel').carousel({
            number: thumb
        });
    });
});

这是模态关闭后我尝试的内容:

//Once the modal window is closed, remove the "active" class from the last showing item (to prevent double image showing if carousel is fired up right away a second time)
$('#carouselModal').on('hidden.bs.modal', function(){
    $('#infoCarousel').carousel({
        interval: false
    });
    $('#infoCarousel div[class*="active"]').each(function(i){
        $(this).removeClass('active');          
    });
});

如前所述,删除类'active'会抛出错误*(阻止旋转木马的正常行为)并再次使用“interval:false”调用轮播没有任何作用。 你可以在行动here中看到它,只需点击信息然后点击缩略图,然后关闭模态并再次点击缩略图。 如何解决这个问题的任何提示将不胜感激。 感谢。

1 个答案:

答案 0 :(得分:1)

没有什么能像晚安睡觉一样来查看问题并找到解决方案。 我的问题是由于我在旋转木马的开放DIV中留下的这个数据声明造成的,data-ride="carousel"这导致旋转木马在页面加载时启动。一旦取出,我的代码就像预期的那样。 这是您复制/粘贴代码时所获得的,并且不会针对您的特定应用对其进行彻底的审核。我承认的次数比我承认的还要多。 希望这将有助于其他复制/粘贴"仔细检查他们粘贴到他们的应用程序中的代码。 干杯!