CODEWITHSUNDEEP
javascriptjqueryowl-carousel
J.B.J.
J.B.J.

Reputation: 430

Owl carousel 2 - drag direction

I am trying to determine the drag direction of a slider, how do i achieve this? I need it since i am syncing 2 sliders, so i need to change the synced slider whenever the other one does. So far it works as long as you use the buttons to navigate, like this:

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

And these events are on the sync1 slider, so whenever you go one or the other way, it will also move the sync2 the same way. I just need to do this when the user DRAGS the slider to change it. I can listen to the dragged event, but i have no way to determine if it was a left or right drag?

In owl carousel 1 there was a dragDirection property, but that seems to be gone.

Upvotes: 5

Views: 12223

Answers (4)

Dmytro Galyko
Dmytro Galyko

Reputation: 11

I have two owl carousel - owl1 and owl2. When something happened with owl1 - owl2 have to do the same. The solution is: 

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);
});

It's important check event.relatedTarget['_drag']['direction'] in setTimeout function, because change.owl.carousel event fires before event.relatedTarget['_drag']['direction'] is changed

Upvotes: 0

Jean Dok
Jean Dok

Reputation: 494

This can also be achived by comparing the start and current values of the owl stage element's X position like this :

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

Upvotes: 2

Umesh Chaurasiya
Umesh Chaurasiya

Reputation: 173

Below is my solution which seems to be working fine with code below -

$('.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 fiddle

Upvotes: 9

Jonathan
Jonathan

Reputation: 11504

This is my solution using relatedTarget.state to get the direction.

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

Note that my carousels are using the same .owl-carousel class.

Upvotes: 1

Related Questions