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