Mousewheel scroll fire only once next callback

Question

I have Owl carousel setup like this

<div class="owl-carousel">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

this is the js

var owl = $('.owl-carousel');
owl.owlCarousel({
    items       : 1,
    singleItem  : true,
    rewindNav   : false,
    dots        : true,
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY<0) {
        console.log(e.deltaY);
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

jsFiddle here: http://jsfiddle.net/f0yph3aL/

as you can see if you scroll your mousewheel over the red square, the slides are moving like crazy. I need to have the next.owl.carousel fire only once so by mousewheel scroll it changes only +1 slide.

I have tried setTimeout inside the owl.on, tried debounce and bind/unbind mousewheel. Maybe I did it wrong. Thanks for any advice.

UPDATE:

Here is unbinded mousewheel, which works great but I don't know ho to bind mousewheel back on after some timeout (setTimeout) http://jsfiddle.net/cz122kk6/1/

It's working fine, may i know in which browser you are testing. — stanze, Jun 22 '15 at 08:51
Opera, Chrome, FIrefox.. if I make big scroll with mousewheel it scrolls from 0 to 9.. but if I scroll just a little bit, it scrolls only one slide. I need to fire that trigger no matter how far I scroll the mousewheel — 5ulo, Jun 22 '15 at 08:57

skobaljic · Accepted Answer · 2015-06-23T08:07:41.500

You can set the flag for transitions and change it in time transition starts/ends. Here is the script code:

$('.owl-carousel').each(function(i) {
    var owl = $(this);
    owl.owlCarousel({
        items: 1,
        singleItem: true,
        rewindNav: false,
        dots: true,
    });
    var allowTransitionLeft = false;
    var allowTransitionRight = true;
    owl.on('mousewheel', '.owl-stage', function (e) {
        e.preventDefault();
        if (e.deltaY < 0) {
            if( allowTransitionRight ) {
                allowTransitionRight = false;
                owl.trigger('next.owl');
            };
        } else {
            if (allowTransitionLeft) {
                allowTransitionLeft = false;
                owl.trigger('prev.owl');
            };
        }
    }).on('translated.owl.carousel', function (e) {
        allowTransitionRight = (e.item.count > e.item.index );
        allowTransitionLeft = (e.item.index > 0);
    });
});

You can see it in Updated Fiddle.

When slide transition ends translated.owl.carousel event is fired. There we chose which transition is allowed based on Carousel's active item index.

The list of Owl Carousel 2 events here.

EDIT: Now works for multiple instances.

There's a problem with multiple owl instances, check updated fiddle http://jsfiddle.net/f0yph3aL/8/ , As you can see when you end up on 9th slide and go to another section, the mouse scroll isn't triggered. — 5ulo, Jun 23 '15 at 07:50

score 0 · Answer 2 · answered Jun 22 '15 at 10:07

0

owl.owlCarousel({
    items       : 1,
    singleItem  : true,
    rewindNav   : false,
    dots        : true,
    loop: true,
    smartSpeed: 1000,
});

Done :)

answered Jun 22 '15 at 10:07

Duc Nguyen

464
3
6

Nope :( If I scroll mousewheel from top to bottom, it fires two times, so no, slowing slide speed isn't solution. I know the trick is in deltaY (mousewheel). – 5ulo Jun 22 '15 at 11:10

Mousewheel scroll fire only once next callback

2 Answers2