スマートフォンの画面表示時にのみ「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の際にはスライドさせたい!!
ことはよくある事ですので、是非その際に参考にしてください。
jQueryページ移管時のアニメーションの最適化
12月 19, 2024jQueryプラグインAOS(Animate On Scroll)についての解説
8月 20, 2024モーダル付き画像スライダーをjQueryで実装する方法
8月 16, 2024