Question

我对bxSlider公共方法有一点问题。我要实现的是可以在幻灯片之间用鼠标滚轮垂直滚动。无论我尝试什么，我总会收到“ goToNextSlide（）不是函数”或“ goToPrevSlide（）不是函数” ...

我正在使用与下面的Pen中提到的jQuery版本相同的jQuery版本和bxslider版本相同的wordpress环境...我真的不明白为什么它不起作用。

我已经尝试过全局定义变量“ slider”，因为我读到这可能是问题所在，但它不起作用...

这是我的代码。如果您滚动的脚本中断太快，我仍然有一个小问题，但是我稍后会修复它：

$(document).ready(function(){

var slider = $('.bxslider').bxSlider({
        pager: false,
        mode: "vertical",
        easing: 'linear',
        speed: 300,
        adaptiveHeight: true,
        infiniteLoop: false,
        autoStart: false,
        nextText: '',
        prevText: '',
        minSlides: 1,
        maxSlides: 4,
        controls: true,
        onSliderLoad: function () {
            $('#marcel-driver-zoe .bxslider').find('.SliderItem:nth-child(2)').find('#SliderBG').addClass('gradient');
        },
        onSlideNext: function ($slideElement, oldIndex, newIndex) {
            $('#marcel-driver-zoe .bxslider').find('.SliderItem:nth-child(2)').find('#SliderBG').removeClass('gradient');
            $('#marcel-driver-zoe .bxslider').find('.SliderItem:nth-child(3)').find('#SliderBG').addClass('gradient');
            $('#marcel-driver-zoe .bxslider').find('.SliderItem:last-child').find('#SliderBG').addClass('gradient');
            $slideElement.find('#SliderBG').removeClass('gradient');
            $('#marcel-driver-zoe .bxslider').find('.SliderItem').eq(oldIndex).find('#SliderBG').addClass('gradient');
        },
        onSlidePrev: function ($slideElement, oldIndex, newIndex) {
            $('#marcel-driver-zoe .bxslider').find('.SliderItem:nth-child(3)').find('#SliderBG').removeClass('gradient');
            $('#marcel-driver-zoe .bxslider').find('.SliderItem:last-child').find('#SliderBG').addClass('gradient');
            $('#marcel-driver-zoe .bxslider').find('.SliderItem').eq(newIndex).find('#SliderBG').removeClass('gradient');
            $('#marcel-driver-zoe .bxslider').find('.SliderItem').eq(oldIndex).find('#SliderBG').addClass('gradient');
        }
    });

    $('.bxslider').bind('mousewheel DOMMouseScroll', function (event) {
        if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
            slider.goToPrevSlide();
        } else {
            slider.goToNextSlide();
        }
    });
});

我在这里做了一个Codepen，它可以正常工作，但是不在我的网站上... https://codepen.io/r0mpr/pen/Nmoxyj

如果有人可以提供一些帮助，那就太好了。非常感谢。

如何使用bxslider公共方法=> goToNextSlide（）不是函数

0 个答案: