スライドショーをjQueryのプラグインを使って実装する場合、オプションの種類が豊富で、レスポンシブにも対応しているなど機能豊富なslickが使いやすいです。
slickの準備
slick公式サイトの「get it now」からダウンロードします。
最低限必要なものはslick.js（もしくはslick.min.js）、slick.css、slick-theme.css、その他必要に応じてfontsフォルダやajax-loader.gifも用意してください。
slickの読み込み
<!-- css -->
<link rel="stylesheet" href="./js/slick/slick.css">
<link rel="stylesheet" href="./js/slick/slick-theme.css">
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="./js/slick/slick.min.js"></script>HTML
<ul class="slide">
<li><img src="dummy1.png"></li>
<li><img src="dummy2.jpg"></li>
<li><img src="dummy3.jpg"></li>
</ul>JS
slickに簡単なオプションを付与した書式は下記となります。
$(".slide").slick({
autoplay: true,
autoplaySpeed: 4000,
infinite: true,
});レスポンシブ
レスポンシブでの書式は下記となります。
$('.slide').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
dots: true,
responsive: [{
breakpoint: 768, // ブレイクポイントを指定
settings: {
slidesToShow: 2,
speed: 600,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
centerMode: true,
centerPadding: '20%',
},
},
]
});参考：https://zero-plus.io/media/jquery-slick/
https://releases.jquery.com/
【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック（オライリー）
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック（オライリー）
