スライダーのプラグイン bxsliderの設定（2パターン）

bxsliderを使って、2つの型を設置したのでメモとして残します。

■PC時スライダー、SP時無効

●ポイント
・SP時はcssだけでそのまま要素を一列の縦積み。

・ウィンドウ幅を取得して基準にすること。
・フラグを用意し、スライダーを起動したときにはリサイズしても処理が通らないようにすること。
・スライダーをやめるときは、オプションの slider.destroySlider(); でスライダーをデストロイすること。

$(function () {
  var slider;
  var sliderflag = false;

  //読み込み時初回実行
  sliderSetting();

  // リサイズ時の実行
  $(window).on('resize', function () {
    sliderSetting();
  });

  function sliderSetting() {
    var width = $('body').width();
  
    if (width >768 && sliderflag === false ) {
      slider = $('.js-slide').bxSlider({
        minSlides: 4,
        maxSlides: 4,
        auto: false,
        moveSlides: 1,
        responsive: false,
        slideWidth: 222,
        slideMargin: 20
      })
      sliderflag = true;
  
    } else if (width <= 768 && sliderflag === true ) {
      slider.destroySlider();
      sliderflag = false;
    }
  }

});

■PC時スライダー、SP時スライダー

●ポイント
・PC時のオプション設定と、SP時のオプション設定が異なるため、
　ウィンドウ幅を取得して基準とし、処理を分けている。
・PC時のスライダーが起動した時のフラグ、
　SP時のスライダーが起動した時のフラグ、
　それぞれを所持するようにし、
　リサイズ時に余分な実行をしないようにしている。
・PCのスライダーを出す時、SPのスライダーを出すときそれぞれで、
　一度オプションの slider.destroySlider(); でスライダーを
　デストロイしてから再設置している。

$(function () {
  var slider;
  var sliderflag = false;

  //読み込み時初回実行
  sliderSetting();

  // リサイズ時の実行
  $(window).on('resize', function () {
    sliderSetting();
  });

  function sliderSetting() {
    var width = $('body').width();

    // 規定サイズより大きかったらPC用の設定に
    // flagは、一度もpcで起動していない、または、spで起動してた場合。
    if ((width > 768 && sliderflag === false) || (width > 768 && sliderflag === 'sp')) { 
      if (sliderflag === 'sp') {
        slider.destroySlider();
      }
      slider = $('.js-slide').bxSlider({
        minSlides: 4,
        maxSlides: 4,
        auto: true,
        moveSlides: 1,
        responsive: true,
        slideWidth: 204,
        slideMargin: 16,
        infiniteLoop: true
      });
      sliderflag = 'pc';

    // 規定サイズより小さい場合はスマホ用の設定に
    // flagは、一度もspで起動していない、または、pcで起動してた場合。
    } else if ((width <= 768 && sliderflag === false) || (width <= 768 && sliderflag === 'pc')) { 
      if (sliderflag === 'pc') {
        slider.destroySlider();
      }
      slider = $('.js-slide').bxSlider({
        minSlides: 1,
        maxSlides: 1,
        auto: true,
        moveSlides: 1,
        responsive: true,
        slideWidth: 270
      });
      sliderflag = 'sp';
    }
  }
});

■補足

・bxslider は、最新のjQuery では動かない模様。
　公式では「jquery/1.8.2/jquery.min.js」のバージョンを読んでいる。

■参照