【jQuery】slickを使ったスライダーの使い方を解説
今回はWEBサイトでよく見かけるスライダー（カルーセル）の使い方について詳しく解説したいと思います。
スライダーとは複数枚の画像やコンテンツを順番に表示させることのできるとても便利な機能です。
slickというツールを使うことで誰でも簡単に実装することができます。
実装には大きく2つのやり方があるので、自分の環境にあった方を試してみてください。
それでは実際にこの記事を見ながら実装していきましょう♪
よく読まれている記事
slickとは
slickとはWEBページなどで使用されるスライダーを実装するためのJavaScriptライブラリの一つです。
このツールを利用することで、短いコードで簡単にスライダーを表示することが可能になりました。
また、プラグインの利用やオプションの設定など多くのカスタマイズが可能となっているため多くの方に利用されています。
レスポンシブやタッチ操作が可能なので、スマホでも問題なく利用できるところが強みです。
下のURLがslickの公式サイトです。
https://kenwheeler.github.io/slick
slickの読み込み方
slick.jsを読み込むのには2パターンあります。
方法①：ファイルをダウンロードする
下記のURLから圧縮ファイルをダウンロードします。
Download Nowボタンをクリックするとローカルにデータがダウンロードできます。
ダウンロードした後に、ファイルの中から下記の４つをhead内に追加します。
<!-- CSS -->
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>方法②：CDNを読み込む
CDNの場合は下記の４つをheadの中に追加するだけです。
簡単でとっても便利ですが、読み込みが少し遅くなってしまうため嫌な方は方法①を試してみてください。
<!-- 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.css">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> slickを実装
slickがダウンロードできた後は、HTMLに下記のコードを入れて実装してみましょう。
（今回は実装に必要な最低限のコード使って解説していきます。）
jsのコードはHTMLでなくjsファイルに入れて切り分けても大丈夫です。
初心者の方にも分かりやすいように画像のカルーセルにしています。
<div class="slider">
<div><img src="画像のパス"></div>
<div><img src="画像のパス"></div>
<div><img src="画像のパス"></div>
</div>
<script>
$('.slider').slick({
autoplay: true
});
</script>
これだけで、簡単なスライダーを作ることができました。
スマホの時にも画面をタップしてスライドするだけで直感的にスライドすることができるようになっています。
無料でこれだけの機能が簡単に使うことができるのはかなりありがたいですね。
See the Pen
スリックスライダー by loa (@hana4525)
on CodePen.
slickのオプション設定
今回は代表的なオプションを７つ紹介します。
オプションとcssの機能を組み合わせるとオリジナルのカルーセルを作ることもできます。
オプションリスト
| 設定 | デフォルト | 効果 |
|---|---|---|
| dots | auto | ドットを表示する |
| autoplay | false | 自動で再生する |
| autoplaySpeed | 300（ms） | 自動で再生する速度 |
| speed | 300（ms） | スライドの切替わる速度 |
| infinite | true | 無限にループする |
| fade | false | スライドの切替えをフェード表示に変更 |
| arrows | true | 左右のページ送りを表示する |
7つのオプションを実際に入れてみるとこんな感じになります。
初心者の方でも簡単にオプションを使ってカスタムすることができるのでとても便利です。
See the Pen
スリックスライダー by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回はslickの使い方について解説してみましたが、いかがでしたでしょうか。
slickの機能はとても優秀なので難しいように見えますが、使い方はとても簡単だということがわかっていただけたかと思います。
他のものに比べてオプションの種類も多様で、色々なカスタマイズをすることが可能です。
今まで別のカルーセルを使っていた方にもぜひ一度使っていただけると嬉しいです。
次回はslickのカスタマイズの方法や、おしゃれに見せるデザインについてご紹介したいと思います。