我有这个网站http://crigamex.wizerlink.net/
我需要同步2个旋转木马 enter image description here
我需要这个https://jsfiddle.net/owcfjaht/ 尝试但
出错 var owl1 = sync1.data("owlCarousel").owl; var owl2 = sync2.data("owlCarousel").owl;
但是它是在版本1上完成的,而我使用版本2
var owl_1 = $('#owl-1');
var owl_2 = $('#owl-2');
owl_1.owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1,
dots: false,
navText: ["<i class='fa fa-chevron-left fa-2x'></i>","<i class='fa fa-chevron-right fa-2x'></i>"]
});
owl_2.owlCarousel({
loop:true,
margin:10,
nav: false,
dots: false,
responsive:{
0:{
items:1
},
768:{
items:4
},
992:{
items:4
},
1200:{
items:4
}
}
});
owl_2.find(".item").mousedown(function(){
var slide_index = owl_2.find(".item").index(this);
owl_1.trigger('to.owl.carousel',[slide_index,300]);
});
答案 0 :(得分:0)
我的代码!
var owl_1 = $('#owl-1');
var owl_2 = $('#owl-2');
owl_1.owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1,
dots: false,
navText: ["<i class='fa fa-chevron-left fa-2x'></i>","<i class='fa fa-chevron-right fa-2x'></i>"]
});
owl_2.owlCarousel({
touchDrag : false,
mouseDrag : false,
loop:true,
margin:10,
nav: false,
dots: false,
responsive:{
0:{
items:1
},
768:{
items:4
},
992:{
items:4
},
1200:{
items:4
}
}
});
owl_2.find(".item").click(function(){
var slide_index = owl_2.find(".item").index(this);
owl_1.trigger('to.owl.carousel',[slide_index,300]);
});
owl_1.on('changed.owl.carousel', function (e) {
control=e.relatedTarget.current()
owl_2.trigger('to.owl.carousel',[control+1,1000],true);// mueve el 2do carrousel
})