通常はスライダーで表示していない部分をスマホの時だけスライダーに変更する方法

2017/01/15
  • JavaScript
通常はスライダーで表示していない部分をスマホの時だけスライダーに変更する方法

スマホで表示する時だけスライダーで表示したいというご要望があったため、調べたところSlickというプラグインで実現できました。今回はその方法と簡単な解説をさせて頂きたいと思います。

Slickのダウンロードと使用方法についてはこちらから。

function sliderSetting(){
  var width = $(window).width();
  if(width <= 767){
    $('#slider').not('.slick-initialized').slick();
   }else{
      $('#slider.slick-initialized').slick('unslick');
   }
}

// 初期表示時の実行
sliderSetting();

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

Slickにはスライダー状態(Slickを使うこと)を解除する仕組みとして「unslick」があります。
今回は画面サイズがスマホサイズの場合はSlickを使用するようにif文で判定して設定しています。
単純に画面サイズに応じてSlickを使用する記述をしてしまうと「resize」時にエラーが出てしまうため、Slick使用時に設定される「.slick-initialized」Classが設定されるかされないかを判定基準にSlickを設定するか「unslick」するかを判定するようにしています。

--追記:2017/08/26--

BxSliderでも同じ仕組みが実装できるので追記。

var slider = $('#slider').bxSlider();

function sliderSetting(){
  var width = $(window).width();
  if(width <= 767){
    slider.reloadSlider();
  }else{
    slider.destroySlider();
  }
}

// 初期表示時の実行
sliderSetting();

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

考え方はSlickと同じで、「destroySlider」でスライダ―状態を解除、「reloadSlider」でスライダー状態に復元するような形で、横幅に応じて切り替えるようにしています。