jquery - 画面サイズに応じて bxslider のスライド数を変更する

Question

画面が 430px 未満の場合に、bxslider の最大スライド数を変更したいと考えています。

以下を使用できますが、これはすべてを2回宣言する必要があるようです。誰かが考えることができる他の方法はありますか？

    if ( $(window).width() < 430) {
    var myslider = $('#my-slider').bxSlider({
        ...
        maxSlides       : 1,
    });  
    }

    else {
    var myslider = $('#my-slider').bxSlider({
        ...
        maxSlides       : 4,
    });
    }

Answer 1

スライダー コードを繰り返すのではなく、maxSlides 変数を設定することで、繰り返しを減らすことができます。

var maxSlides,
    width = $(window).width();

if (width < 430) {
    maxSlides = 1;
} else {
    maxSlides = 4;
}

var myslider = $('#my-slider').bxSlider({
    ...
    maxSlides: maxSlides,
});

三項演算子を使用してさらに簡単にすることもできますが、簡潔にしすぎることは必ずしも利点ではありません。

var width = $(window).width();

var myslider = $('#my-slider').bxSlider({
    ...
    maxSlides: (width < 430) ? 1 : 4,
});

Answer 2

ウィンドウのサイズを変更すると、設定が動的に調整されるレスポンシブ ソリューションを次に示します。

var slider,
  oBxSettings = { /* Your bxSlider settings */ };

function init() {
  // Set maxSlides depending on window width
  oBxSettings.maxSlides = window.outerWidth < 430 ? 1 : 4;
}

$(document).ready(function() {
  init();
  // Initial bxSlider setup
  slider = $('#my-slider').bxSlider(oBxSettings);
});

$(window).resize(function() {
  // Update bxSlider when window crosses 430px breakpoint
  if ((window.outerWidth<430 && window.prevWidth>=430)
    || (window.outerWidth>=430 && window.prevWidth<430)) {
    init();
    slider.reloadSlider(oBxSettings);
  }
  window.prevWidth = window.outerWidth;
});

Answer 3

私はjqueryで次のように使用します：

 var windowWidth = $(window).width();  
 var obxSettings = {...};
 slider.bxSlider(obxSettings);

 $(window).resize(function() {
    windowWidth = $(window).width();
    if(windowWidth < 768) {
    obxSettings.minSlides = 2;
    slider.reloadSlider();
 }   
 else {
    obxSettings.minSlides = 3;
    slider.reloadSlider();
 }
 });