スマートフォンの画面表示時にのみ「slick」を適用

jQueryのスライダープラグイン「slick」を使用して、スマートフォン画面でのみ「slick」を有効にし、
PC画面では無効にする方法をご紹介します。

下記の条件分岐により読み込みを変更します。

w = $(window).width();
if (w <= 750) {
	// スマホ用に記載（750px以下のとき）
} else {
	// PC用に記載
}

「slick」の処理の切り替えに関する詳細。

function checkBreakPoint() {
	w = $(window).width();
	if (w <= 750) {
		// スマホ用に記載（750px以下のとき）
		$('.slick-box.onlysp').not('.slick-initialized').slick({
			//スライドさせる
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: true,
			autoplay: true,
			autoplaySpeed: 3000
		});
	} else {
		// PC用に記載
		//「slick」を無効にする場合は、以下のコードを記述します。
		$('.slick-box.onlysp.slick-initialized').slick('unslick');
	}
}
// ウインドウがリサイズする度にチェック
$(window).resize(function(){
	checkBreakPoint();
});
// 初回チェック
checkBreakPoint();

まとめ

PCの時は普通に表示したいけど、SPの際にはスライドさせたい!!
ことはよくある事ですので、是非その際に参考にしてください。