レスポンシブでPCレイアウトの時にプラグイン適用を解除したい

Question

レスポンシブサイトの制作で、「スマホレイアウトの時だけプラグイン適用したい」という要望があり、
ネットの情報を参考に「スマホ時にプラグイン適用」まではできたのですが、
ウィンドウサイズ変更でPCレイアウトにした時に、一度適用されたプラグイン（スライダー等）を解除するにはどうしたら良いのか分かりません。
現状のコードは以下の通りです。

$(function(){

function slideHuck(){
	var w = $(window).width();
	var size = 640;
	if (w <= size) {
        //スマホレイアウト時にスライダープラグインを実行
		$("#slider01").slick();	
	} else {
		//★PCレイアウトの時にはスライダー等の処理を解除したい
	}
}
slideHuck();

var timer = false;
$(window).resize(function() {
	if (timer !== false) {
		clearTimeout(timer);
	}
	timer = setTimeout(function() {
        //リサイズ完了時に実行
		slideHuck();
	}, 200);
});

});

スマホ幅からPC幅にウィンドウサイズを変更した際に再読み込みすればもちろん解除にはなるのですが、
再読み込みせずに自動的に解除できる方法があるならそうしたいです。
「一度実行したものを解除する」という考え方自体がもしかしたらよろしくないのかもしれませんが、
現状自分の知識の範囲だとそれ以外の方法が思いつきません。
何か参考になるアドバイスをいただけますと助かります。
（JSについてはjQueryなら何とか、、という程度なので、もし生JavaScriptの機能等が必要になるようでしたら、どの辺を勉強すれば良いのか合わせてアドバイスいただけますと嬉しいです。）

なお、スマホレイアウト時にだけ実行されるのは、スライダー等の既存のプラグインの場合もありますし、
自作の関数である場合もあります。どちらでも共通でできる方法があればよいですが、
既存プラグイン実行と自作関数実行の場合でもし手法が異なるようでしたら、それぞれの場合の考え方・必要な機能等の情報をいただけますと助かります。

よろしくお願い申し上げます。

Answer 1

responsiveオプションでbreakpointを設定でき、unslick: true で「slickを適用しない」ということが出来るようです。

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

【レスポンシブ対応のjQueryカルーセル 「slick」 - Jumpei Sato】
http://sakic.jp/blog/web/jquery-slick

  $(function(){
    $('.slider').slick({
      slidesToShow: 1, //画面上に何個表示させるか
      slidesToScroll: 1, //何個ずつスクロールさせるか
      autoplay: true, //自動再生させるか
      autoplaySpeed: 4000, //自動再生の間隔
      dots:  false, //下のドットは表示させるか
      arrows:  true, //左右のナビゲーションは表示させるか
      infinite: true, //ループさせるかどうか
      centerMode: true, //表示中のスライドをセンターに配置するか
      responsive: [ //レスポンシブの設定
      {
        breakpoint: 1024, //ブレークポイント1の値
          settings: { //ブレークポイント1のオプション
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
      },
      {
        breakpoint: 600, //ブレークポイント2の値
          settings: { //ブレークポイント2のオプション
            slidesToShow: 2,
            slidesToScroll: 2
          }
      },
      {
        breakpoint: 400, //ブレークポイント3の値
          settings: { //ブレークポイント3のオプション
            unslick: true //slickを適用しない
          }
      },
    });
  });

また、$('.your-slider').slick('unslick'); としても解除できるのでは。

Comments

[aKusano]

ご回答ありがとうございます。

>>unslick: true で「slickを適用しない」ということが出来るようです。

なんと！そのオプションは見逃していました。
まだ実際に試してはいませんが、スライダーの適用／非適用についてはそれで行けそうな雰囲気がしてきました。試してみてまた結果をご報告させていただきます。

情報ありがとうございました！

[aKusano]

$('.your-slider').slick('unslick');という記述では解除できませんでしたが、

function slideHuck(){
var w = $(window).width();
var size = 640;
if (w <= size) {
$("#slider01").slick(); /*slickを適用*/
} else {
$("#slider01").unslick(); /*slickを解除*/
}
}

のようにしたら画面サイズに応じて自動的にスライダー解除できました！！
大変助かりました！ありがとうございます。

Answer 2

多くのスライダー系のjQueryプラグインでは、実行することによりDOMの操作がなされ、DOM（HTML）の構造が変更されます。
これを解除するには、そっくりそのまま元に戻す（逆の挙動をする）メソッドを実装するか、元のDOMを記憶しておいてWindow幅が戻った時にDOMをリセットするかしなければなりません。

現実的に解消するとすれば、PCとスマホで別々の要素を用意しておいて、CSSでWindow幅ごとにdisplay: none;等を切り替えて割り当てるのがいいかと思います。

Comments

[aKusano]

ご回答ありがとうございます。

>>現実的に解消するとすれば、PCとスマホで別々の要素を用意しておいて
今回の案件ではそれをやると運用負荷が跳ね上がるので、選択肢としては取れないのです。。
「元のDOMを記憶しておいてWindow幅が戻った時にDOMをリセット」については何をどうしたら実現できるのかサッパリ分からない状態なので今の私には難しそうですね。。。

適切なタイミングでリロードを入れる方向で考える方が良さそうな気がしてきました。