猫头鹰轮播同步项目

我的项目涉及使用 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