0

センター機能を使用しているフクロウカルーセル2を使用しています。カルーセルに表示するアイテムが 5 つあります。jquery を使用してクラスを追加し、カルーセル内の特定の div を検索することは可能ですか? div に ID やクラスを追加する必要はありません。 http://owlcarousel.owlgraphic.com/demos/center.html

ここに私のhtmlがあります

<div class="owl-carousel">
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
  <div class="product"> Your Content </div>
</div>

これが私のjsです

$(document).ready(function () {
$(".owl-carousel").owlCarousel({
    center: true,
    items:5,
    loop:true,
    margin:0,
    responsive:{
        600:{
            items:5
        }
    },
    nav:true

});


});

ライブで実際のカルーセルを表示する場合、これらの 2 つのクラス「a」と「b」を追加する必要があります。

<div class="owl-carousel">
  <div class="product"> Your Content </div>
  <div class="product b"> Your Content </div>
  <div class="product a"> Your Content </div>
  <div class="product center"> Your Content </div>
  <div class="product a"> Your Content </div>
  <div class="product b"> Your Content </div>
  <div class="product"> Your Content </div>
</div>

だから私は基本的に中央の隣のdivと中央の隣の2番目のdivを見つけようとしています

4

1 に答える 1

0

1 分間の試行で、次のことができます。

$("#owlSlider").owlCarousel({
  navigation : false,
  autoPlay:true,
  afterMove : function (elem) {
    var lng = $('.product').length,
        a = [],
        b = [];
    if(!!$('.center').length) {
      $('.a, .b').removeClass('a b');
      a.push($('.center').index()-1>=0?$('.center').index()-1:lng-1);
      a.push($('.center').index()+1<lng?$('.center').index()+1:0);
      b.push($('.center').index()-2>=0?$('.center').index()-2:lng-2);
      b.push($('.center').index()+2<lng?$('.center').index()+2:$('.center').index()+2-lng);
      a.forEach(function(item){
        $('.product:eq('+item+')').addClass('a');
      });
      b.forEach(function(item){
        $('.product:eq('+item+')').addClass('b');
      });
    }
  }
});

ここに住んでいます: http://codepen.io/raduchiriac/pen/doLQdg?editors=101

次に、これを少し最適化します。これは非常に醜いためです。

于 2015-08-14T13:44:05.507 に答える