Как добавить класс к первому и последнему элементу среди видимых элементов Owl Carousel 2?

Question

Мне нужно добавить класс к первому и последнему пункту в настоящее время видимых элементов на Owl Carousel 2.

Answer 1

DEMO:

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

Сова карусельного добавляет класс активного ко всем видимые элементы. Итак, как вы можете видеть, я написал сценарий ниже, чтобы пропустить все элементы сова с активным классом, а затем использовать 0-й и последний индекс, я добавляю два разных класса.

Используйте код в своем проекте, и вы получите классы.

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