jquery - Owl Carousel 同步项目

Question

我的项目涉及使用 Owl Carousel 创建照片库。我正在使用 Owl Carousel Sync 作为主画廊，其中包含大图像和缩略图，我想要底部的第三个画廊滚动浏览所有画廊。所有这些都运行良好。

但我有一个包含所有缩略图的登陆页面。当您单击时，我希望相同的缩略图位置与底部的第三个画廊相同。例如，如果用户在转到主图库时单击第五个缩略图，则第五个缩略图将突出显示并滚动到开始位置。

这是我想要实现的目标的一个很好的例子

http://www.radyrahban.com/gallery/nose/ethnic-rhinoplasty/view-all.php

这是我的代码

    $(document).ready(function() {      var sync1 = $("#sync1");      var sync2 = $("#sync2");      sync1.owlCarousel({        items : 1,        singleItem : true,        slideSpeed : 200,        navigation: false,        pagination:false,        autoWdth: true,        //afterAction : syncPosition,        responsiveRefreshRate : 200,        transitionStyle : "fade"      });      sync2.owlCarousel({        items : 3,        mouseDrag: false,        responsiveRefreshRate : 10      });      //$('.owl-buttons').append('');      var flag = false;      var slides = sync1.owlCarousel({        margin: 10,        items: 1,        nav:true      }).on('change.owl.carousel', function(e) {        if (e.namespace && e.property.name === 'position' && !flag) {          flag = true;  //thumbs.to(e.relatedTarget.relative(e.property.value), 300, true);          flag = false;        }      }).data('owl.carousel');      var thumbs = sync2.owlCarousel({        items:4,        nav:false      }).on('click', '.item', function(e) {        e.preventDefault();     sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index(), 300, true]);      }).on('change.owl.carousel', function(e) {        if (e.namespace && e.property.name === 'position' && !flag) {        }      }).data('owl.carousel');      var patientsActiveSlide = $('.slider.patients .here').index();      var patientSlider = $('.slider.patients');      patientSlider.owlCarousel({        items : 6, //10 items above 1000px browser width        margin: 30,        nav: true,        startPosition: patientsActiveSlide - 1,        dots: true,        slideBy: 8,        navText: '',        responsive: {          0: {            items: 5,            margin: 5,            slideBy: 5          },          576: {            items: 5,            slideBy: 5,            margin: 20          },          1024: {            items: 8,            slideBy: 8,            margin: 20          }        }      });      //add class here to first thumbnail, and then add/remove on clicks      $('.thumbnails .owl-item').eq(0).addClass('here');      $('.thumbnails .owl-item').on('click', function(){        $('.thumbnails .owl-item.here').removeClass('here');        $(this).addClass('here');      });      if($(window).width() > 1024){        console.log($('.patients-wrap .owl-item').length);        if($('.patients-wrap .item').length 

Answer 1

sync1.on('changed.owl.carousel', function(event) {
    var current = event.item.index;
    if (current > 1 && current < event.item.count)
    {
        sync2.trigger('to.owl.carousel', [current, 500, true]);
    }
    else
    {
        sync2.trigger('to.owl.carousel', [0, 500, true]);
    }
});