問題 × 解決策

slickをスマートフォン時のみ有効にする

問題

「slick」をスマートフォン時のみ有効にしたい。

解決策

javascriptでPC、スマートフォンを判定し、PC時は「slick('unslick')」で無効にし、スマートフォン時はslickを再実行する。

 

「slick」の処理をPC時とスマートフォン時で切り替える。

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

DEMOはこちら

スライド01

スライド01です。

スライド02

スライド02です。

スライド03

スライド03です。

スライド04

スライド04です。

「slick」を無効にする方法

「slick」を無効にするには、以下の記述を行います。

$('slickを適用させる要素').slick('unslick');

「slick」を再実行する際、「slick」が実行中かどうかの判定

「slick」を再実行する際、「slick」が実行されているのにさらに実行してしまう、ということのないよう、「slick」が実行中かどうかの判定を行うために、以下の記述を行います。

$('.slick-box.onlysp').not('.slick-initialized').slick();

ポイント!

「slick」を実行中の要素には、「slick-initialized」というクラスが付与されるため、「このクラスが付いていなければ実行する」という記述を行うことで二重の処理を防ぐことができます。

PC時とスマートフォン時の判定

今回はPC時とスマートフォン時の判定を以下のようにウインドウ幅を元に行います。

w = $(window).width();
if (w <= 767) {
	// スマホ向け(767px以下のとき)
} else {
	// PC向け
}

「slick」の処理の切り替えの記述の全容

上記を元に、「slick」をPC時には無効に、スマートフォン時には有効にする記述を構築します。

function checkBreakPoint() {
	w = $(window).width();
	if (w <= 767) {
		// スマホ向け(767px以下のとき)
		$('.slick-box.onlysp').not('.slick-initialized').slick({
			//スライドさせる
			slidesToShow: 2,
			slidesToScroll: 1,
			arrows: false,
			autoplay: true,
			autoplaySpeed: 6000
		});
	} else {
		// PC向け
		$('.slick-box.onlysp.slick-initialized').slick('unslick');
	}
}
// ウインドウがリサイズする度にチェック
$(window).resize(function(){
	checkBreakPoint();
});
// 初回チェック
checkBreakPoint();

参照

【slick.jsを使用したスライダをスマホでは適用させてPCでは静止画表示にする方法 | ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ】
https://www.genius-web.co.jp/blog/web-programming/how-to-use-slick-js-to-apply-sliders-on-a-smartphone-to-the-rest-of-the-picture-on-a-pc.html

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fourteen + 15 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧