Question

我在模态窗口中有一个旋转木马。单击缩略图图像时，弹出模式并显示相应的轮播项目，触发整个轮播。我的问题，一旦模态窗口关闭，旋转木马仍在继续，循环通过所有图像。如果再次单击缩略图图像，则会显示模式，但会出现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中看到它，只需点击信息然后点击缩略图，然后关闭模态并再次点击缩略图。如何解决这个问题的任何提示将不胜感激。感谢。

Answer 1

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

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

1 个答案: