スライダーをslick.jsを使用して実装する方法

スライダーを導入する時に全て自作でとなると相当大変な上に変な動きになったりしてしまい、上手くいかないことが多いかと思います。

そんな時はツールを使うと簡単に実装することが出来ます。

ここではslickというツールを使ってスライダーを実装していく手順を紹介します。

slickのパッケージをダウンロード

まずはslickのパッケージをダウンロードします。

基本的にはこのダウンロードしたファイルを自分のサイトに正しく配置することによって、見本のHTMLとslick設定で簡単に実装できます。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

ファイルの配置

ダウンロードしたファイルを自分のサイトに配置します。

例えばフォルダ構成が

css
js
index.html

のようになっている場合、cssとjsにslickのファイルとフォルダ配置します。

まず、解凍したフォルダ内のfontフォルダを

font
css
js
index.html

のように配置します。

次にcssフォルダ内に

slick.css
slick-theme.css

を配置します。

拡張子の.scssや.lessはcssの元になるファイルですので直接関係ないファイルです。

次にjsフォルダ内に

slick.min.js

を配置します。

slick.jsはslick.min.jsの圧縮前のファイルですのでどちらかで問題ありません。

HTMLに挿入

まずは必要なファイルを読み込むソースをindex.htmlのhead内に記入します。

<link rel="stylesheet" href="css/slick.css"/>
<link rel="stylesheet" href="css/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

javascript部分で外部jqueryを読み込む必要があります。

これはバージョンなどがありますのでslickの設定が変わるとバージョンが変わる可能性があるので都度変更しましょう。

次にHTML内に基本のスライダータグを書いていきます。

<ul class="slider">
    <li><a href="#"><img src="img/1.jpg" alt="1"></a></li>
    <li><a href="#"><img src="img/2.jpg" alt="2"></a></li>
    <li><a href="#"><img src="img/3.jpg" alt="3"></a></li>
</ul>

class=”slider”が書かれているタグの子要素をスライドします。

ファイル名やあタグなどの書き方は都度変更しましょう。

さらに、slickの設定javascriptを</body>直前に書いていきます。

<script>
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:false,
});
</script>

デモですので自動スライドをする設定とその秒数、スライド数からスライド下部の●（ドット）を消す設定を入れています。

詳しくは設定一覧を確認してください。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

以上で基本のslick実装は完了です。

slickは様々な設定が可能ですので色々と調べてみましょう。