猫头鹰旋转木马同步项目

Question

我的项目涉及使用Owl Carousel 创建一个照片库。我将Owl Carousel Sync 用于具有大图像和缩略图的主画廊，并且我希望底部的第三个画廊可以滚动浏览所有画廊。一切都很好。

但我有一个包含所有缩略图的登录页面。当您单击时，我希望相同的缩略图位置与底部的第三个画廊相同。例如，如果用户在进入主画廊时单击第五个缩略图，则第五个缩略图将突出显示并滚动到开始位置。

这是我想要实现的一个很好的例子

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

这是我的代码

$(文档).ready(函数() { var sync1 = $("#sync1"); var sync2 = $("#sync2"); sync1.owlCarousel({ 项目：1， 单项：真， 滑动速度：200， 导航：假， 分页：假， 自动宽度：真， //afterAction : syncPosition, 响应刷新率：200， 过渡风格：“淡出” }); sync2.owlCarousel({ 项目：3， 鼠标拖动：假， 响应刷新率：10 }); //$('.owl-buttons').append(''); 变量标志 = 假； var 幻灯片 = sync1.owlCarousel({ 边距：10， 项目：1， 导航：真 }).on('change.owl.carousel', function(e) { if (e.namespace && e.property.name === '位置' && !flag) { 标志=真； //thumbs.to(e.relatedTarget.relative(e.property.value), 300, true); 标志=假； } }).data('owl.carousel'); var thumbs = sync2.owlCarousel({ 项目：4， 导航：假 }).on('点击', '.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 === '位置' && !flag) { } }).data('owl.carousel'); var patientsActiveSlide = $('.slider.patients .here').index(); var patientSlider = $('.slider.patients'); PatientSlider.owlCarousel({ items : 6, //10 个超过 1000px 浏览器宽度的项目 保证金：30， 导航：是的， startPosition: 患者ActiveSlide - 1, 点：真的， 幻灯片：8， 导航文本：''， 响应：{ 0：{ 项目：5， 边距：5， 幻灯片：5 }, 576：{ 项目：5， 幻灯片：5， 保证金：20 }, 1024：{ 项目：8， 幻灯片：8， 保证金：20 } } }); //在此处添加类到第一个缩略图，然后在点击时添加/删除 $('.thumbnails .owl-item').eq(0).addClass('here'); $('.thumbnails .owl-item').on('点击', function(){ $('.thumbnails .owl-item.here').removeClass('here'); $(this).addClass('这里'); }); 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)
        }
    }
});