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