如何在 Owl Carousel 2 的可见项目中为第一个和最后一个项目添加类？答案

【问题标题】：How can I add class to the first and last item among the visible items of Owl Carousel 2?如何在 Owl Carousel 2 的可见项目中为第一个和最后一个项目添加类？
【发布时间】：2016-10-18 10:22:09
【问题描述】：

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

【问题讨论】：

标签： jquery html css owl-carousel

【解决方案1】：

演示：

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

猫头鹰轮播为所有可见项目添加了一个活动类。正如你所看到的，我在下面编写了一个脚本来循环遍历所有类活动的 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=preview

【讨论】：

你能提供一个jsfiddle演示吗？
我做了一个演示。
您的代码工作正常，但在我的情况下，我希望它保持在第一个和最后一个活动项目上，即使在滚动滑块后也是如此。就像当您单击下一个按钮时，第一项和最后一项更改对吗？我需要我们的课程仍然在可见的项目上。
我期待这个问题。我会更新答案和演示。
我已经更新了答案和演示。请看一看。

【解决方案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;  
}

【讨论】：

JS 对我不起作用，选择第一个活动项目而不是最后一个。

【解决方案3】：

根据@Lasithds 的回答，如果您想将“活动”类添加到第一个猫头鹰活动 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,
});

【讨论】：