javascript - 尝试将 jquery-mousewheel 插件插入 jquery Cycle2

Question

我正在尝试将 jquery-mousewheel 插件 ( https://github.com/jquery/jquery-mousewheel ) 与插件 - jquery Cycle2 插件集成。

一切都很好，直到我发现鼠标滚动会触发大量滚动事件，特别是新的“神奇”触控板和鼠标会在滚轮中产生很大的惯性。

在 GitHub 上，我找到了一个专门为此插件设计的插件(https://github.com/amondit/jquery.scrollsteps.js)来处理这个问题。

我使用了文件 jquery.scrollsteps-full-min.js。

这就是我调用插件的方式:

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

});

并且，当我开始上下滚动页面时，我从 Firebug 控制台收到以下错误消息:

“TypeError:i.dow​​n 不是函数”或“TypeError:i.up 不是函数”

也许有人对为什么会发生此错误有任何想法或想法？

如果我使用默认的鼠标滚轮初始化(没有scrollsteps插件) - 一切正常:

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

但正如我提到的，它会触发大量滚动事件。

也许我错误地解决了这个问题？如果有人知道其他解决方案 - 将非常感谢您的帮助。

Answer 1

回答)

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

});