BX 滑块 - 响应式 - 最小/最大幻灯片

Question

我正在尝试更改在不同窗口宽度下显示的幻灯片数量，在初始加载时，它会拉动适量的幻灯片。但在调整滑块选项中的最小/最大幻灯片大小时，即使我的控制台日志显示要更新的数量，滑块选项中的最小/最大幻灯片似乎也没有改变。

我的代码是

        var minSlides;
        var maxSlides;
        function windowWidth() {
            if ($(window).width() < 420) {
                minSlides = 1;
                maxSlides = 1;
            }
            else if ($(window).width() < 768) {
                minSlides = 2;
                maxSlides = 2;
            }
            else if ($(window).width() < 1200) {
                minSlides = 3;
                maxSlides = 3;
            }
            else {
                minSlides = 4;
                maxSlides = 4;
            }
        }

        windowWidth();
        var slider = $('.m-partners-slider').bxSlider({
            pager: false,
            controls: false,
            auto: true,
            slideWidth: 5000,
            startSlide: 0,
            nextText: ' ',
            prevText: ' ',
            adaptiveHeight: true,
            moveSlides: 1,
            slideMargin: 20,

            minSlides: minSlides,
            maxSlides: maxSlides,
        });

        $('.slider-prev').click(function () {
            var current = slider.getCurrentSlide();
            slider.goToPrevSlide(current) - 1;
        });
        $('.slider-next').click(function () {
            var current = slider.getCurrentSlide();
            slider.goToNextSlide(current) + 1;
        });

        $(window).on("orientationchange resize", function () {
            windowWidth();
            slider.reloadSlider();
            console.log("minSlides:" + minSlides);
            console.log("maxSlides:" + maxSlides);
        })

任何帮助将不胜感激。

Answer 1

调用

reloadSlider()

将重新使用您在初始化期间指定的相同配置。为了更改

minSlides

和

maxSlides

值，您需要将新的配置对象传递给

reloadSlider()

函数。像这样的东西应该有效：

// Use the conventional $ prefix for variables that hold jQuery objects.
var $slider;

// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration() {

    // When possible, you should cache calls to jQuery functions to improve performance.
    var windowWidth = $(window).width();
    var numberOfVisibleSlides;

    if (windowWidth < 420) {
        numberOfVisibleSlides = 1;
    } else if (windowWidth < 768) {
        numberOfVisibleSlides = 2;
    } else if (windowWidth < 1200) {
        numberOfVisibleSlides = 3;
    } else {
        numberOfVisibleSlides = 4;
    }

    return {
        pager: false,
        controls: false,
        auto: true,
        slideWidth: 5000,
        startSlide: 0,
        nextText: ' ',
        prevText: ' ',
        adaptiveHeight: true,
        moveSlides: 1,
        slideMargin: 20,
        minSlides: numberOfVisibleSlides,
        maxSlides: numberOfVisibleSlides
    };
}

// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider() {
    var config = buildSliderConfiguration();

    if ($slider && $slider.reloadSlider) {
        // If the slider has already been initialized, reload it.
        $slider.reloadSlider(config);
    } else {
        // Otherwise, initialize the slider.
        $slider = $('.m-partners-slider').bxSlider(config);
    }
}

$('.slider-prev').click(function () {
    var current = $slider.getCurrentSlide();
    $slider.goToPrevSlide(current) - 1;
});

$('.slider-next').click(function () {
    var current = $slider.getCurrentSlide();
    $slider.goToNextSlide(current) + 1;
});

// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider);
// Configure the slider once on page load.
configureSlider();

Answer 2

在 app.js 中添加 autoDirection: 'prev'
它适用于我的项目