slide.bs.carousel不能阻止轮播切换的解决办法
在https://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-event中测试以下代码可以阻止切换,但项目中却阻止失败
问题的原因还是未找到,但可以确认不是jq和bootstrap版本的问题
$('#myCarousel').on('slide.bs.carousel', function () {
return false;//不能阻止轮播切换,但slid中的事件却不会执行
}
退一步解决办法:等轮播切换完后,在根据是否要阻止切换将轮播换回
activeItemIndex = 0; //轮播想要停留的或前往的项
isSaved = 0; // 当前页面是否保存
$('#myCarousel').on('slide.bs.carousel', function () {
var curItemIndex =$(this).find(".item.active").index(); // 当前项下标,此时还未切换
var len = $('.shelfItem').length; // 所有轮播项数量
var $cur = $('.item_'+curItemIndex); // 当前项
if($cur.hasClass('left')){ // left 下一项
// 下一个
activeItemIndex = (curItemIndex+1)%len;
}else{ // right 上一项
//上一个
activeItemIndex = (len+(curItemIndex-1)%len)%len;
}
if(isSaved==1){// 当前页面已保存
return true;
}else{ // 当前页面未保存时提示
if(confirm("系统可能不会保存您所做的更改。")){
return true;
}
}
//当前
activeItemIndex = curItemIndex;
return true;
});
$('#myCarousel').on('slid.bs.carousel', function () {
var curItemIndex =$(this).find(".item.active").index(); //当前项下标,已切换
if(curItemIndex == activeItemIndex){ // 是否需要切换
//切换后业务逻辑
}else{
//阻止切换,返回前一项
$(".shelfItem").removeClass("active");
$(".item_" + activeItemIndex).addClass("active");
}
});
此时,轮播会有切换后再切回的显示bug