0

サムネイルナビゲーションが組み込まれていないカルーセルjqueryプラグインを使用しているため、貧乏人のバージョンを構築しようとしています。

Owl Carousel プラグインを使用しています。

したがって、この例で必要なことは、メイン カルーセルのスライド div にクラス .active がある場合、同じインデックスを持つ 2 番目のカルーセルに div が必要であり、クラスをアクティブにすることです。 .

メイン カルーセル コード:

    <div id="slide1">
        <div class="owl-wrapper-outer">
            <div class="owl-wrapper">
               <div class="owl-item"></div>
               <div class="owl-item active"></div>
               <div class="owl-item"></div>
            </div>
        </div>
    </div>

次に、ナビゲーションとして使用しているカルーセルを次に示します。

<div id="slide2">
   <div class="owl-wrapper-outer">
       <div class="owl-wrapper">
           <div class="owl-item"></div>
           <div class="owl-item"></div>  <!-- this should automatically get .active added -->
           <div class="owl-item"></div>
       </div>
   </div>
</div>

両方の要素のインデックスを取得する方法がわかりません。その後、それらが一致するように #slide2 にアクティブなクラスを追加します。

わかりました、Michael Schmuki によって提供されたコードのおかげで、ここに更新があります。スライドが移動するときに既に使用されている関数にこのコードを追加しました..動作します..ただし、#slide1 のスライドショーでは、一度に 2 つのスライドが表示されます。良いことは、これらのスライドの両方にアクティブ クラスが自動的に追加されることですが、このコードに追加すると、#slide2 のサムネイルの 1 つだけがアクティブ クラスを取得します。両方のアクティブなスライドを取得していない理由はありますか?

私が使用している関数の一部は次のとおりです。

function animateIn(carousel){
  var carousel = $('#slide1');
  var nthChildActive = $(this).find(".active").index() + 1;
  $('#slide2 .owl-item .slide.active').removeClass('active');
  $("#slide2 .owl-wrapper .owl-item:nth-child("+nthChildActive+")").addClass("active");
}

そして、これがフクロウカルーセルに設置されている場所です

carousel.owlCarousel({
  items: 2,
   pagination:false,
   stopOnHover:true,
   afterMove: function() {
     animateIn();
      }
    });
4

1 に答える 1

2

次のように、(複数の) アクティブな要素を検出してマークできます。

//detect & mark
$("#slide1 .owl-item").each(function(index) {
  if($(this).hasClass("active"))
    $("#slide2 .owl-item:nth-child("+(index+1)+")").addClass("active");
});

http://jsbin.com/oHOyEZi/7/edit?js,outputで新しい例を試すことができます。

しかし、私は Owl Carousel に詳しくないので、カルーセルが実際にスライドするときにこのロジックが起動されるように指定する方法を自分で理解する必要があります。

于 2013-10-28T22:32:34.203 に答える