我需要同步2个猫头鹰旋转木马

Question

我有这个web http://crigamex.wizerlink.net/

我需要同步2 carrousel 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]);
  });

Answer 1

我的代码！

 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

  })