Owl Carohausel onChange仅在页面更改时触发

Question

我正在使用每页设置3个项目的Owl Carousel 2。我想在发生幻灯片事件时选择第二个项目，因为我模糊了第一和第二个项目并使唯一的第二个可见。

我正在使用这段jQuery代码来实现这一目标：

$("#service-slider .active:eq(1)").addClass("myActive");

这就是我启动猫头鹰轮播的方式：

$("#service-slider").owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: false,
    smartSpeed: 1500,
    onChange: activeSelect(),
    onDrag: activeSelect(),
    onTranslate: activeSelect(),
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 1
        },
        1000: {
            items: 3
        }
    }
});

$("#service-slider .active:eq(1)").addClass("myActive");

function activeSelect() {
    $("#service-slider .active").removeClass("myActive");
    $("#service-slider .active:eq(1)").addClass("myActive");
}

var owl = $('#service-slider');
owl.owlCarousel();
owl.on('next.owl.carousel', function (event) {
    $("#service-slider .active").removeClass("myActive");
    $("#service-slider .active:eq(1)").addClass("myActive");
});
owl.on('prev.owl.carousel', function (event) {
    $("#service-slider .active").removeClass("myActive");
    $("#service-slider .active:eq(1)").addClass("myActive");
});

第一次可以正常使用，但是在过渡项目时它不起作用；仅在整个页面更改时有效。

这里是小提琴：https://jsfiddle.net/iCromwell/mpoxf9rc/1/

Answer 1

user7290573找到了解决方案。您可以使用Owl Carousel的center选项来实现我想要的功能。他的小提琴可以在这里找到：https://jsfiddle.net/y2xhr4dk/

$("#service-slider").owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    center: true,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: false,
    smartSpeed: 1500,
    responsive: {
        0: {
            items: 3
        },
        600: {
            items: 3
        },
        1000: {
            items: 3
        }
    }
});