Trying to insert jquery-mousewheel pluginin in to jquery cycle2

Question

I'm trying to integrate jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the plugin - jquery cycle2 plugin.

Everything was fine until I discovered that mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.

On GitHub I found a plugin (https://github.com/amondit/jquery.scrollsteps.js) designed specifically for this plugin to handle with this problem.

I used the file jquery.scrollsteps-full-min.js.

That's how I call the plugin:

$(function() {

    var $slider = $('.slider_overlay');

    // slider initialize
    $slider.cycle({
        fx: 'scrollVert',
        timeout: 0,
        pager: '.slider_list',
        pagerTemplate: '',
        pagerActiveClass: 'active_slide',
        slides: '> div',
        centerHorz: true,
        centerVert: true,
        speed: 1000
    });

    // initialize scrollsteps plugin
    $slider.scrollsteps({
        up: $slider.cycle('prev'),
        down: $slider.cycle('next')
    });

});

And, when I start to scroll the page up and down, I get the following error message from firebug console:

"TypeError: i.down is not a function" or "TypeError: i.up is not a function"

Perhaps someone has any ideas or thoughts why this error may occur?

If I use a default mousewheel init (without scrollsteps plugin) - everything worked fine:

$slider.mousewheel(function(e) {
    if (e.deltaY > 0) {
        $slider.cycle('prev');
    } else {
        $slider.cycle('next');
    }
});

but as I mentioned it triggers a lot of scrolling events.

Maybe I'm solve this problem incorrectly ? If somebody knows other solutions - will be very grateful for the help.

Answer 1

Аnswer )

$(function() {

    var $slider = $('.slider_overlay');

    $slider.cycle({
        fx: 'scrollVert',
        timeout: 0,
        pager: '.slider_list'
        pagerTemplate: '',
        pagerActiveClass: 'active_slide',
        slides: '> div',
        centerHorz: true,
        centerVert: true,
        speed: 1000
    });

    function prev() {
        $slider.cycle('prev')
    }

    function next() {
        $slider.cycle('next')
    }

    $slider.scrollsteps({
        up: prev,
        down: next
    });

});