我如何将类添加到Owl Carousel 2的可见项目中的第一个和最后一个项目

Question

我需要将类添加到Owl Carousel 2上当前可见项目的第一项和最后一项。

Answer 1

DEMO:

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

预览

Owl carousel为所有可见项添加了一个活动类。因此，正如您所看到的，我在下面编写了一个脚本，在类活动的情况下循环遍历所有owl-item，然后使用第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');
            }
        });
    }

});

演示:

http://plnkr.co/edit/t9URfKq9Mwh9jO705h7u?p =预览

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

Answer 3

在@Lasithds的回答之后，如果你想添加"active"类设置为第一个owl活动div，您可以使用以下命令:

$('.owl-carousel').on('changed.owl.carousel initialized.owl.carousel', function (event) {
    $(event.target)
        .find('.owl-item').removeClass('first')
        .eq(event.item.index).addClass('first');
})
.owlCarousel({
    loop: false,
    dots: false,
});