Сова карусель 2 - направление перетаскивания

Я пытаюсь определить направление перетаскивания ползунка, как мне этого добиться? Мне это нужно, так как я синхронизирую 2 ползунка, поэтому мне нужно менять синхронизированный ползунок всякий раз, когда это делает другой. Пока это работает, пока вы используете кнопки для навигации, например:

$('.owl-next').click(function() {
    sync2.trigger('next.owl.carousel');
})
$('.owl-prev').click(function() {
    sync2.trigger('prev.owl.carousel');
})

И эти события находятся на ползунке sync1, поэтому всякий раз, когда вы выбираете тот или иной путь, он также будет перемещать sync2 таким же образом. Мне просто нужно сделать это, когда пользователь перетаскивает ползунок, чтобы изменить его. Я могу прослушать событие перетаскивания, но не могу определить, было ли это перетаскивание влево или вправо?

В owl carousel 1 было свойство dragDirection, но, кажется, его больше нет.


javascript jquery owl-carousel
person J.B.J.    schedule 23.03.2015    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Ниже приведено мое решение, которое, похоже, отлично работает с приведенным ниже кодом:

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
 }
}).on("dragged.owl.carousel", function (event) {
console.log('event : ',event.relatedTarget['_drag']['direction'])
});

скрипт JS

person Umesh Chaurasiya    schedule 11.04.2017

arrow_upward
2
arrow_downward

Это также может быть достигнуто путем сравнения начального и текущего значений позиции X элемента сцены совы следующим образом:

var owl = $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true
});
owl.on("change.owl.carousel", function (e) {
    if (e.relatedTarget._drag["stage"]["start"].x < e.relatedTarget._drag["stage"]["current"].x) {
       console.log("move right");
    } else {
        console.log("move left");
    }
});
person Jean Dok    schedule 19.06.2019

arrow_upward
1
arrow_downward

Это мое решение, использующее relatedTarget.state для определения направления.

var owl = $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true
});
owl.on("dragged.owl.carousel", function (event) {
    if (event.relatedTarget.state.direction === "left") {
        $(".owl-carousel").not(this).trigger("next.owl.carousel");
    } else {
        $(".owl-carousel").not(this).trigger("prev.owl.carousel");
    }
});

Обратите внимание, что мои карусели используют один и тот же класс .owl-carousel.

person Jonathan    schedule 14.09.2016

arrow_upward
0
arrow_downward

У меня есть две карусели совы - owl1 и owl2. Когда что-то случилось с owl1 - owl2 должен сделать то же самое. Решение:

owl1.on("change.owl.carousel", function(event){
    setTimeout(function(){
        if (event.relatedTarget['_drag']['direction'] == "right") {
           owl2.trigger('prev.owl.carousel');
           event.relatedTarget['_drag']['direction'] = null;
        } else {
            owl2.trigger('next.owl.carousel');
        }
    }, 0);
});

Важно проверить event.relatedTarget['_drag']['direction'] в функции setTimeout, потому что событие change.owl.carousel срабатывает до изменения event.relatedTarget['_drag']['direction'].

person Dmitry Galyko    schedule 24.12.2019