我在我的项目中使用owl carousel和bootstrap,我也根据我的需要修改了同步的owl轮播,并在引导标签中放了两个owl轮播,在默认选项卡上这个工作正常,但是当我切换tab,jquery代码时我写的不是工作。
JS代码:
$(document).ready(function() {
$('.nav-tabs a').on('shown.bs.tab', function(){
var sync1 = $("#sync11");
var sync2 = $("#sync21");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
navigation: true,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 5,
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
$("#sync21")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#sync21").data("owlCarousel") !== undefined){
center(current)
}
}
$("#sync21").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
});
var sync1 = $("#sync1");
var sync2 = $("#sync2");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
navigation: true,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 5,
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
$("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#sync2").data("owlCarousel") !== undefined){
center(current)
}
}
$("#sync2").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
我的剧本:
var all = $(".side .owl-wrapper .owl-item ").length;
console.log(all);
var height1 = $(".side .owl-wrapper .owl-item ").height();
var height = $(".side .owl-wrapper .owl-item ").height() * 5;
$(".side .owl-wrapper").css("height", height +"px");
var syncposi = $(".side .owl-wrapper .synced").index();
console.log(syncposi);
if (syncposi ==0) {
$(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
}
$(".owl-next").click(function(){
var index = $(".side .owl-wrapper .synced").index();
if (index > 4 && index <=22) {
$('.side .owl-wrapper').animate({scrollTop:'+='+height1});
}
$(".owl-prev").css({"pointer-events":"auto", "opacity":1});
if(index==0) {
$('.side .owl-wrapper').scrollTop(0);
console.log("hi");
}
});
$(".owl-prev").click(function(){
var index = $(".side .owl-wrapper .synced").index();
if (index >5) {
$('.side .owl-wrapper').animate({scrollTop:'-='+height1});
}
if (index <2) {
$('.side .owl-wrapper').animate({scrollTop:'-='+height1*2});
}
if (index ==0) {
$(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
}
});
setInterval(function(){
var syncposi = $(".side .owl-wrapper .synced").index();
if (syncposi ==0) {
$(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
}
},100);
});