Owl Carousel 2の表示アイテムのうち最初と最後のアイテムにクラスを追加するにはどうすればよいですか？

Question

私は2

Answer 1

DEMOフクロウカルーセルに現在表示された項目の最初と最後の項目にクラスを追加する必要があります。

http://plnkr.co/edit/t9URfKq9Mwh9jO705h7u?p=preview

フクロウカルーセルは、すべてのアクティブなクラスを追加します目に見えるアイテム。あなたが見ることができるように、私はowl-itemをループしてクラスをアクティブにしてから、0番目と最後のインデックスを使用するスクリプトを作成しました。私は2つの異なるクラスを追加しています。

プロジェクトでコードを使用すると、クラスが追加されます。

jQuery(document).ready(function($) { 

    var carousel = $(".latest-work-carousel"); 
    carousel.owlCarousel({ 
     loop : true, 
     items : 3, 
     margin:0, 
     nav : true, 
     dots : false, 
    }); 

    checkClasses(); 
    carousel.on('translated.owl.carousel', function(event) { 
     checkClasses(); 
    }); 

    function checkClasses(){ 
     var total = $('.latest-work-carousel .owl-stage .owl-item.active').length; 

     $('.latest-work-carousel .owl-stage .owl-item').removeClass('firstActiveItem lastActiveItem'); 

     $('.latest-work-carousel .owl-stage .owl-item.active').each(function(index){ 
      if (index === 0) { 
       // this is the first one 
       $(this).addClass('firstActiveItem'); 
      } 
      if (index === total - 1 && total>1) { 
       // this is the last one 
       $(this).addClass('lastActiveItem'); 
      } 
     }); 
    } 


}); 

DEMO：

http://plnkr.co/edit/t9URfKq9Mwh9jO705h7u?p=preview

Answer 2

私はまた、最後のアクティブなアイテムをスタイリングと同じ問題を持っていたし、簡単な修正のためにどこにも見つけることができませんでした。最後に、私のために働く修正を思いついた。

私のために働いた簡単な修正があります。

$('.owl-carousel') 
    .on('changed.owl.carousel initialized.owl.carousel', function(event) { 
    $(event.target) 
     .find('.owl-item').removeClass('last') 
     .eq(event.item.index + event.page.size - 1).addClass('last'); 
    }).owlCarousel({ 
    responsive: { 
     0: { 
     items: 3, 
     }, 
     768: { 
     items: 4, 
     }, 
    } 
    }); 

最初の項目はCSSを使用するだけで簡単にスタイル設定できます。

.owl-item:not(.active) + .owl-item.active{ 
    background: red; 
}