我需要同步2头猫头鹰

时间:2019-06-27 16:02:38

标签: javascript owl-carousel

我有这个网站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]);
  });

1 个答案:

答案 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

  })