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

Question

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

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

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

这就是我启动 Owl 轮播的方式：

$("#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");
});

它第一次运行良好，但是当一个项目转换时它不工作；仅在整个页面发生变化时起作用。

这是一个fiddle：https://jsfiddle.net/iCromwell/mpoxf9rc/1/

Answer 1

user7290573 找到了解决方案。您可以使用 Owl Carousel 的 center 选项来实现我想要的。他的 fiddle 可以在这里找到：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
        }
    }
});

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

Owl Carohausel onChange triggering only on page change

javascript

jquery

owl-carousel