Owl Carousel Sync Items

Question

My project involves creating a photo gallery with Owl Carousel. I'm using Owl Carousel Sync for the main gallery which has the big image and the thumbnail and I want a third gallery at the bottom that scrolls through all galleries. All that is working great.

But I have a landing page with all thumbnails. As you click, I want the same thumbnail position to be the same as the third gallery at the bottom. For example, if the user clicks on the fifth thumbnail when they go to the main gallery, the fifth thumbnail will be highlighted and scroll to start position.

This is a good example of what I'd like to achieve

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

This is my code

    $(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

$(document).ready(function() {   
    var sync1 = $("#sync1");
    var sync2 = $("#sync2");
 
    sync1.owlCarousel({
        items : 1,
        singleItem : true,
        slideSpeed : 1000,
        nav: false,
        autoplay: true,
        dots: true,
        loop: true,
        animateOut: 'fadeOut',
        afterAction : syncPosition,
        responsiveRefreshRate : 200,
        afterInit : function(el){
          el.find(".owl-item").eq(0).addClass("synced");
        }
    });
 
    sync2.owlCarousel({
        items : 1,
        pagination:false,
        dots: true,
        nav: false,
        margin: 5,
        smartSpeed: 1000,
        slideSpeed : 1000,
        animateOut: 'fadeOut',
        responsiveRefreshRate : 1000,
        afterInit : function(el){
          el.find(".owl-item").eq(0).addClass("synced");
        }
    });
 
    function syncPosition(el){
        var current = this.currentItem;
        $("#sync2")
          .find(".owl-item")
          .removeClass("synced")
          .eq(current)
          .addClass("synced")
        if($("#sync2").data("owlCarousel") !== undefined){
          center(current)
        }
    }
 
    $("#sync2").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync1.trigger("owl.goTo",number);
    });
 
    function center(number){
        var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;
        for(var i in sync2visible){
              if(num === sync2visible[i]){
                var found = true;
            }
        }

        if(found===false){
          if(num>sync2visible[sync2visible.length-1]){
            sync2.trigger("owl.goTo", num - sync2visible.length+2)
        }else{
            if(num - 1 === -1){
              num = 0;
            }
            sync2.trigger("owl.goTo", num);
          }
        } else if(num === sync2visible[sync2visible.length-1]){
          sync2.trigger("owl.goTo", sync2visible[1])
        } else if(num === sync2visible[0]){
          sync2.trigger("owl.goTo", num-1)
        }
    }
});

Answer 2

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