帶三個同步幻燈片的貓頭鷹傳送帶

Question

我正在尋找同步貓頭鷹傳送帶幻燈片的解決方案。

我已經制作了只有2張幻燈片的同步幻燈片。

我真正需要的是一張幻燈片，它是類別，下面是第二張幻燈片，其中包含可變數量的內容，屬於不同的類別。

我的解決方案是，複製/粘貼兩個幻燈片的前代碼並更改所有類和所有內容。但它現在混淆了不同幻燈片上的所有課程。

這個想法還有其他解決方案嗎？

的Javascript

var sync1 = $(".service-line"); 
var sync2 =$(".servicetext"); 

$(".service-line").owlCarousel({ 
    navigation: false, 
    pagination: true, 
    slideSpeed: 1000, 
    paginationSpeed: 500, 
    paginationNumbers: true, 
    singleItem: true, 
    autoPlay: false, 
    autoHeight:false, 
    animateIn: 'slideIn', 
    animateOut: 'slideOut', 
    afterAction : syncPosition, 
    responsiveRefreshRate : 200, 
    afterMove: afterAction 
}); 

function afterAction(){ 
    $(".owl-item.active").find("animation-cap").addClass("animated", "bounce"); 
} 

$(".servicetext").owlCarousel({ 
    items: 1, 
    pagination: false, 
    slideSpeed: 800, 
    paginationSpeed: 700, 
    animateIn: 'slideIn', 
    animateOut: 'slideOut', 
    autoHeight: true, 
    responsiveRefreshRate : 100, 
    mouseDrag: false, 
    afterInit : function(el){ 
     el.find(".owl-item").eq(0).addClass("synced"); 
    } 
}); 

function syncPosition(el){ 
    var current = this.currentItem; 
    $(".servicetext") 
     .find(".owl-item") 
     .removeClass("synced") 
     .eq(current) 
     .addClass("synced"); 
    if($(".servicetext").data("owlCarousel") !== undefined){ 
     center(current); 
    } 
    } 

    $(".servicetext").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+1); 
     }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); 
    } 

    } 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
<div class="konfig-slide-top"> <!--TOP Slider #1 --> 

    <!--TOP SLIDER slide1--> 
    <div class="slider-wrap"> 
    <div class="slide-content"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 animation-cap"> 
      <h2>Category 1</h2> 
      </div> 
     </div> 


     </div> 
     <!--<img src="img/service/01.png" alt="01">--> 
    </div> 

    </div><!--slide1 ends--> 

    <!--TOP SLIDER slide2--> 
    <div class="slider-wrap"> 
    <div class="slide-content"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 animation-cap"> 
      <h2>Category 1</h2> 
      </div> 
     </div> 


     </div> 
     <!--<img src="img/service/01.png" alt="01">--> 
    </div> 

    </div><!--slide2 ends--> 


</div> 
<!-- Top Slider ends --> 


<!-- Bottom Slider Starts --> 
<div class="konfig-slide-bottom"> 

    <!-- ====== BOTTOM SLIDER Slide 1 ====== --> 
    <div class="row"> 
    <div class="row lower-input-main"> 
     <!-- ====== INNER SLIDER Slide starts ====== --> 
     <div class="konfig-slide-bottom-inner"> 
     <div class="row"> 
      <!--inner slider slide 1 --> 

      <div class="col-md-12"> 
      <h1 style="color:white;">Slide 1 inner slide</h1> 
      </div> 
     </div> 

     <div class="row"> 
      <!--slide 2 inner slide --> 

      <div class="col-md-12"> 
      <h1 style="color:white;">Slide 2 inner slide</h1> 
      </div> 
     </div> 

     </div> 



    </div> 
    </div> 
</div> 

Answer 1

我貼錯了的事情，對不起。至少，我今天早上再次嘗試並完成了我的任務。我只想粘貼我的代碼，所以這個問題得到了回答。

我jQuery代碼：

var synctop = $(".konfig-slide-top"); 
    var syncbottom =$(".konfig-slide-bottom"); 


    $(".konfig-slide-top").owlCarousel({ 
     navigation: true, 
     pagination: false, 
     slideSpeed: 1000, 
     paginationSpeed: 500, 
     paginationNumbers: false, 
     singleItem: true, 
     autoPlay: false, 
     autoHeight:false, 
     animateIn: 'slideIn', 
     animateOut: 'slideOut', 
     afterAction : syncPositionnew, 
     responsiveRefreshRate : 200, 
     afterMove: afterActionnew 
    }); 

    $(".konfig-slide-bottom").owlCarousel({ 
     items: 1, 
     pagination: false, 
     navigation: false, 
     slideSpeed: 800, 
     paginationSpeed: 700, 
     animateIn: 'slideIn', 
     animateOut: 'slideOut', 
     autoHeight: true, 
     responsiveRefreshRate : 100, 
     mouseDrag: false, 
     afterInit : function(el){ 
     el.find(".owl-item").eq(0).addClass("syncednew"); 
     } 
    }); 


    var owl = $(".konfig-slide-inner"); 

    owl.owlCarousel({ 
     items: 1, 
     pagination: false, 
     navigation: false, 

     slideSpeed: 800, 
     paginationSpeed: 700, 
     animateIn: 'slideIn', 
     animateOut: 'slideOut', 
     autoHeight: true, 
     responsiveRefreshRate : 100, 
     mouseDrag: false, 
     loop: false, 
     afterInit : function(el){ 
     el.find(".owl-item").eq(0).addClass("syncednew2"); 
     } 
    }); 


    //slide inner slider   
    $('.next-inner').click(function() { 
     owl.trigger('owl.next'); 
    }); 

    var top = $(".konfig-slide-top"); 

    // slide parent slider 
    $('.next-top').click(function() { 
     top.trigger('owl.next'); 
    }); 




    function afterActionnew(){ 
     $(".owl-item.active").find("animation-cap").addClass("animated", "bounce"); 
    } 

    function syncPositionnew(el){ 
var current = this.currentItem; 
$(".konfig-slide-bottom") 
    .find(".owl-item") 
    .removeClass("syncednew") 
    .eq(current) 
    .addClass("syncednew"); 
if($(".konfig-slide-bottom").data("owlCarousel") !== undefined){ 
    centernew(current); 
} 
    } 

    $(".konfig-slide-bottom").on("click", ".owl-item", function(e){ 
e.preventDefault(); 
var number = $(this).data("owlItem"); 
synctop.trigger("owl.goTo",number); 
    }); 

    function centernew(number){ 
var syncbottomvisible = syncbottom.data("owlCarousel").owl.visibleItems; 
var num = number; 
var found = false; 
for(var i in syncbottomvisible){ 
    if(num === syncbottomvisible[i]){ 
    var found = true; 
    } 
} 

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

} 

在HTML中的konfig-滑動內嵌套在konfig-滑動底部：

<div class="konfig-slide-top"> 
-slide 1 
-slide 2 
- etc. 
</div> 

<div class="konfig-slide-bottom"> 
    <div class="konfig-slide-inner"> 
    -slide 1 
     -text 1 
     -text 2 
     -text 3 
    -slide 2 
     -text 1 
     -text 2 
     -text 3 
    - etc. 
    </div> 
</div> 

現在我有多個幻燈片，一滑塊，與頂部滑塊同步。 唯一的問題是，當konfig-slide-inner從slide1更改爲slide2時，slide1中的text1未顯示，它直接跳轉到text2。總結起來，所以如果我現在有幻燈片3，則不顯示2個文本幻燈片，依此類推。 我無法得到它的線索。 請誰能幫助我？