問題
「slick」をスマートフォン時のみ有効にしたい。
解決策
javascriptでPC、スマートフォンを判定し、PC時は「slick('unslick')」で無効にし、スマートフォン時はslickを再実行する。
「slick」の処理をPC時とスマートフォン時で切り替える。
jQueryのスライダープラグイン「slick」で、スマートフォン時のみ「slick」を有効にし、PCでは無効にする方法をご紹介します。
DEMOはこちら
「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
コメント