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

Answer 2

$(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)
        }
    }
});

猫头鹰轮播同步项目

2 个答案: