Сова Carohausel onChange срабатывает только при смене страницы - PullRequest
Новая
       9

Сова Carohausel onChange срабатывает только при смене страницы

0 голосов
/ 14 октября 2019

Я использую Owl Carousel 2 с 3 пунктами на страницу настройки. Я хочу выбирать каждый второй элемент, когда происходит событие слайда, потому что я размываю первый и второй элементы и делаю видимым только второй.

Я использую этот фрагмент кода 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/

1 Ответ

1 голос
/ 14 октября 2019

пользователь7290573 нашел решение. Вы можете использовать опцию центра Карусели совы, чтобы добиться того, чего я хочу. Его скрипку можно найти здесь: 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
        }
    }
});
...