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

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

DEMO:

http://plnkr.co/edit/t9URfKq9Mwh9jO705h7u?p=preview 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 http://plnkr.co/edit/t9URfKq9Mwh9jO705h7u?p=preview