Элементы синхронизации совы карусели

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]); 
    } 
});