CODEWITHSUNDEEP
jquerycarouselowl-carousel
pg-robban
pg-robban

Reputation: 1435

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

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?

Upvotes: 2

Views: 15846

Answers (4)

WhiteLine
WhiteLine

Reputation: 1989

use the dragDirection property of the plugin

Upvotes: 2

Jonathan
Jonathan

Reputation: 11504

Use the state property on relatedTarget to get the direction.

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

Upvotes: 2

Eugene Chernomor
Eugene Chernomor

Reputation: 11

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

Upvotes: 1

helene
helene

Reputation: 66

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.

Upvotes: 3

Related Questions