CODEWITHSUNDEEP
javascriptjqueryowl-carouselowl-carousel-2
SimeriaIonut
SimeriaIonut

Reputation: 586

Owl Carousel 2 - Drag active when clicking a slide

I am using Owl Carousel 2 and I have (and want) the mouseDrag and touchDrag active.

When I click anything in the slide, however, owl thinks I dragged and changed the slide, so it fires onDragged callback. I DID NOT change the slide though, I just clicked on a slide ("mousedown", "mouseup" fires onDragStart).

I want to be able to do something IF and only IF I change the specific slide with a drag move (for example: I go from slide 1 to slide 2). More specificaly, I want to prevent onDragStart unless I really change from one slide to another.

What am I doing wrong?

Upvotes: 0

Views: 4303

Answers (1)

Roland Krinner
Roland Krinner

Reputation: 421

You could try something like that. Store index of the current slide before the slide changed in a global var (onDrag). After the slide changed (onTranslated) check the index again and see if the index is still the same. IF not --> Slide changed.

All Events are listed here: http://www.owlcarousel.owlgraphic.com/docs/api-events.html

var indexBeforeChange = -1;
$(function () {
    if ($('#slider .item').length > 1) {
        $('#slider').owlCarousel({
            onDrag: slideBeforeChange,
            onTranslated: slideChanged
        });
    }
});
function slideBeforeChange(event) {
    indexBeforeChange = event.page.index;
    console.log('indexBeforeChange: ' + indexBeforeChange);
}
function slideChanged(event) {
    var indexAfterChange = event.page.index;
    if (indexAfterChange != indexBeforeChange) {
        console.log('Slide changed, indexAfterChange: ' + indexAfterChange);
    } else {
        console.log('Slide did not change');
    }
}

Upvotes: 2

Related Questions