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

JavaScript | 2017.01.15

スマホで表示する時だけスライダーで表示したいというご要望があったため、調べたところ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();
});

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

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」でスライダー状態に復元するような形で、横幅に応じて切り替えるようにしています。