我在一个模态窗口中有一个旋转木马。单击缩略图图像时,将弹出一个模式,并显示相应的carousel项,从而触发整个carousel。我的问题是,一旦模式窗口关闭,旋转木马仍在继续,循环通过所有图像。如果再次单击缩略图,则会显示模式,但会显示两个堆叠在一起的图像。我理解为什么会发生这种情况,当一个缩略图被点击时,我会动态地添加“active”类,所以第二次启动转盘时,两个图像都有“active”类。
我想知道是否有办法完全停用旋转木马。如果我试图删除"active“类,javascript会从Bootstrap carousel函数抛出一个错误,"Cannot read property 'slice‘of undefined”。我尝试使用"interval: false“调用carousel函数,但是没有用。
下面是我用来调用code和carousel的代码:
$("#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‘类将抛出一个错误*(阻止carousel的正常行为),并使用"interval: false“再次调用carousel不做任何事情。你可以在动作here中看到它,只需点击信息,然后点击缩略图,然后关闭模式并再次点击缩略图。任何关于如何解决这个问题的提示都将不胜感激。谢谢。
发布于 2014-08-02 16:48:41
没有什么比睡个好觉更能解决问题并找到解决方案的了。我的问题是由于我在carousel的开场DIV中留下的这个数据声明引起的,data-ride="carousel"
这会导致carousel在页面加载时启动。一旦这段代码被取出,我的代码就可以按预期运行了。这就是你在复制/粘贴代码时得到的结果,而不是为你的特定应用程序彻底检查它。我对此感到内疚的次数比我愿意承认的还要多。希望这能帮助其他“复制/粘贴”人员仔细检查他们粘贴到应用程序中的代码。干杯!
https://stackoverflow.com/questions/25089819
复制相似问题