「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
2024/10/07
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅の場合はスライダー有りのまま、スマホのブラウザ幅の場合はスライダーを無くして画像をそのまま表示させたいということがあった。以前にメモしたmatchMediaでいけるんじゃないかと思い試してみたところ実装できた。サンプルと実装方法をメモ。
サンプル
https://taitan916.info/sample/slick/display_change/
slick
公式サイト
https://kenwheeler.github.io/slick/
CDN
CDNで使う場合は以下を記述する。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
実装方法
ソースコード
PC / スマホはbreakpointの値によって判別されるので適宜調整すること。
<style> #slider{ width: 1200px; margin: 0 auto; } </style> <div id="slider"> <div><img src="./img/001.jpg"></div> <div><img src="./img/002.jpg"></div> <div><img src="./img/003.jpg"></div> <div><img src="./img/004.jpg"></div> <div><img src="./img/005.jpg"></div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"> <script> $(function(){ var breakpoint = 800; const limit = window.matchMedia(`(max-width: ${breakpoint}px)`); limit.addEventListener(`change`, slider); slider(); function slider(){ if( $(window).width() > breakpoint ){ $(`#slider`).slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3, arrows: true, }); }else{ $('#slider.slick-initialized').slick('unslick'); } } }); </script>
関連記事
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...