7

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.

2 Answers 2

12

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

Add autoDirection: 'prev' In app.js. It works on my project.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.