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