BX Slider - Отзывчивый - Мин./Макс. Слайды

Question

Я пытаюсь изменить количество слайдов, показанных при разных ширинах окна, при активной загрузке вытягивая нужное количество слайдов. но при изменении размера слайды min/max в настройках слайдера, похоже, не меняются, хотя в моих консольных журналах отображается обновляемый номер.

мой код

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