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