BX Slider - Responsive - Min / Max Slides

Question

I am trying to change the amount of slides shown at different window widths, on inital load its pulling the right amount of slides through. but on resize the min/max slides within the slider options dont seem to be changing, even though my console logs are showing the number to be updated.

my code is

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

Any help would be greatly appreciated.

Answer 1

Calling reloadSlider() will re-use the same configuration you specified during initialization. In order to change the minSlides and maxSlides values, you'll need to pass a new configuration object to the reloadSlider() function. Something like this should work:

// 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();