3つの同期したスライドを持つOwlカルーセル

Question

私は、フクロウカルーセルスライドを同期させるソリューションを探しています。

私は既に2つのスライドだけで同期されたスライドを作成しました。

私が本当に必要とするのは、カテゴリである1つのスライドで、次に、さまざまなカテゴリに属する​​コンテンツの可変数を含む2番目のスライドです。

解決策は、前のコードを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のコード：konfig-スライドの内側にはkonfigスライド下にネストされたHTMLで

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

} 

：

<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に変更されたとき、slide2のtext1は表示されず、text2に直接ジャンプするということです。これにより、スライド3があれば、2つのテキストスライドが表示されなくなります。 私はそれの手がかりを得ることができません。 誰か助けてくれますか？