Owl-carousel move direction (drag + Previous/Next clicks)

Question

I'm making a site where the user is supposed to get contents in chunks, much like a short powerpoint presentation where the user can move back and forth between slides containing divs with HTML.

For this, I thought it would be a good idea to use a carousel-like presentation view. I looked into Owl-carousel and its afterMove callback parameter, but I don't see anything in the documentation of how to get the direction of the movement.

In other words, if the user drags left or clicks the Next button, I want to call function n if the user drags to the right or clicks the Previous button, I want to call function p. Is this possible or should I look into other plugins?

Answer 1

I needed to do the same but only for next/prev click (i don't use dragging). Since I didn't find any proper way to get the move direction, I overrided the click function to add an informative class :

    $(".owl-next").click(function(){
      $('.owl-carousel').addClass('move-next');
    })

    $(".owl-prev").click(function(){
        $('.owl-carousel').addClass('move-prev');
    })

Then in the afterMove function :

afterMove: function() {
    if( $('.owl-carousel').hasClass('move-next') ) {
          // Click next: your code
          $('.owl-carousel').removeClass('move-next');
    } else if ( $('.owl-carousel').hasClass('move-prev') ) {
          // Click prev: your code
          $('.owl-carousel').removeClass('move-prev');
    }
}

May not be the best way to do it, but at least I can get what I want.

Answer 2

Use the state property on relatedTarget to get the direction.

owl.on("drag.owl.carousel", function (event) {
    console.log(event.relatedTarget.state.direction);
});

Answer 3

use the dragDirection property of the plugin

Answer 4

I read on github.com

/******/

var owl = $('#your-carousel-selector').data('owlCarousel');

$(document.documentElement).keyup(function(event) {
    // handle cursor keys
    if (event.keyCode == 37) {
        owl.prev();
    } else if (event.keyCode == 39) {
        owl.next();
    }
});