slick.jsを使ってスライダーをつくってみる
jQueryのライブラリの「slick.js」を使ってスライドショーをつくる手順をご紹介していきます。
slick.jsを使ってスライドショーを作る方法
まずは、基本となるHTMLコードを確認していきましょう。
HTML
サンプルコードとして以下のようなコードをご用意しました。
<section class="slider">
<ul>
<li><img src="images/slide01.jpg"></li>
<li><img src="images/slide02.jpg"></li>
<li><img src="images/slide03.jpg"></li>
<li><img src="images/slide04.jpg"></li>
<li><img src="images/slide05.jpg"></li>
<li><img src="images/slide06.jpg"></li>
<li><img src="images/slide07.jpg"></li>
<li><img src="images/slide08.jpg"></li>
<li><img src="images/slide09.jpg"></li>
<li><img src="images/slide10.jpg"></li>
</ul>
</section>liタグにスライドしたい画像を配置しています。
<head>内でslick.jsに必要なCSSを２つ読み込む
そして、<head>～</head>内に「slick.css」と「slick-theme.css」を読み込みます。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"/></body>の直前でjQueryとslick.jsを読み込む
</body>の直前でslick.jsに必要な「jQuery」と「slick.js」を読み込みます。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>CSS
ul{
list-style: none;
width: 100%;
margin: 2rem auto;
padding: 0;
}
li{
margin: 0 0.1%;
}
img{
width: 100%;
}ul
スライドする要素を囲うulタグに対し、リストマークを非表示にして上下にマージンを取っています。
li
スライドする画像の間隔を少し空けたいので、左右に0.1%のmarginを指定しています。
javascriptを記述
先ほど、jQueryとslick.jsを読み込んだ後ろ（</body>タグの直前）に、javascriptを実行するコードを記述していきます。
slick.jsの基本設定は以下のようになります。
$(‘.slider’).slick();
この基本設定に、いくつかオプションを指定していきます。
<script type="text/javascript">
$("ul").slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
responsive: [
{
breakpoint: 768, // 768px以下の設定
settings: {
slidesToShow: 1
}
}
]
});
</script>ulタグに対してslick.jsが起動するようにして、いくつかのオプション設定でカスタマイズしています。
dots: true
スライドの下に、インジケーターと呼ばれるドットを表示するかどうかの指定をしています。trueの場合は表示、falseで非表示になります。
slidesToShow
画面上にいくつの要素を見えるように配置するかを数値で指定します。
slidesToScroll
一度の横スライドで、いくつの要素をスライドさせるかの値を数値で指定します。「1」であれば１要素ずつスライドされます。
centerMode: true
スライドエリアをセンター寄せするオプションです。
autoplaySpeed: 3000
スライダーが停止して、再度スライドを開始するまでの時間間隔を指定します。1秒であれば1000を、3秒であれば3000を指定します。
slick.jsのレスポンシブ対応
例えば、デスクトップで閲覧する場合は3つの要素を表示してスライドさせるが、スマホの場合は小さくなってしまうので、1つのみ表示して、1つずつスライドさせたい場合には、javascript内に「responsiveオプション」を設定することで実現できます。
先ほどの「javascript」に記述した以下の部分でがそれにあたります。
responsive: [
{
breakpoint: 768, // 768px以下の設定
settings: {
slidesToShow: 1
}
}
]responsiveオプションの中に、
breakpoint: 768
ウィンドウサイズが横幅768px以下になった場合に以下の指定が適用されます。
setting:{ slidesToShow: 1}
768px以下になった場合には、スライドが見える数を「1」にするという指示になります。
簡易的な作りでサンプルは作成しておりますが、インジケーターのドットのデザインやスライドする要素のデザインなどは、CSS等でカスタマイズできますので挑戦してみてください。