簡単にスライダーを設置！JQueyプラグイン「slick」の使い方【jQuery】

webサイトにスライダーを設置しようとしたらJQueryプラグインを使うとかなり楽です。

私は数あるスライダープラグインの中でも「slick」を好んで使うのですが、地味にCSSの設定やらなんやらがあるので、ぺっぺっぺと簡単に設置できるように備忘録も兼ねて使い方を記事にしたいと思います。

ということで今回は「slickを使ってサイトに簡単にスライダーを設置する方法」をご紹介します。

slickの準備

slickを使用するには当然本体が必要なので公式サイトにアクセスして本体をダウンロード、またはCDNリンクをコピーします。

ダウンロードの場合

1. 公式サイトの上部にあるグローバルナビの中の「get it now」をクリック
2. 「Download Now」をクリック
3. Zipファイルが保存されるので解凍
4. 使用するものを使用するサイトのフォルダにコピー

head内に読み込みの記述をします。読み込む順番はCSS→JS。

※下は例ですので保存している場所やフォルダ名はご自身のものを指定してください。（下でいう「js」の部分）

<link rel="stylesheet" type="text/css" href="js/slick.css">
<link rel="stylesheet" type="text/css" href="js/slick-theme.css">
<script type="text/javascript" src="js/slick.min.js"></script>

CDNの場合

slick用CDNのurlをこちらのサイトからコピーしてきます。

head内に読み込みの記述をします。読み込む順番はCSS→JS。

コピペで行けるようにJQuery本体のCDNの記載をしました。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

slickの設置方法

準備が終わったら実際にスライダーを設置してみましょう！

HTML

「slider」というクラス名をつけたul要素の中に、画像を含んだli要素を配置します。クラス名はなんでも良しです！

公式サイトの説明では、親要素のdivの中に子要素のdivを配置していますが、ulとliを使ったほうがわかりやすい気がします。

スライド用に画像サイズは合わせて作成しておきましょう！

<ul class="slider">
    <li><img src="<!--画像URL-->"></li>
    <li><img src="<!--画像URL-->"></li>
    <li><img src="<!--画像URL-->"></li>
</ul>

CSS

bodyとul要素のmargin・paddingを0にして余白をリセットします。

※スライダーの矢印が白いため、グレーの背景を設定しています。

合わせてimgをmax-width:100%としましょう。

.sliderにmax-widthで幅をつけて、marginの設定でスライダーを真ん中に配置します。

body {
    margin: 0;
    padding: 0;
    background: #dedede;
}

ul {
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

.slider {
    max-width: 1200px;
    margin: 0 auto;
}

.slick-prev:before,
.slick-next:before {
    color:
        /*--- カラーコード ---*/
}

script

スライダーを実行するscriptを書きます。下記のコードをbodyタグの直前にコピペしましょう。

※「script.js」などの別データに記入すると管理が楽です。

<script>
    $(function() {
        $('.slider').slick({
            dots: true, //下の丸ぽっち（インジケーター）を表示 
            autoplay: true, //自動再生 
            autoplaySpeed: 5000 //自動再生の速度 
            //ここにオプションを書いていく 
        });
    });

</script>

完成！

とっても簡単でしたね！これだけで標準のスライダーが動きます！

See the Pen slickの使い方 by design-levelup (@marurain) on CodePen.

オプションでカスタマイズ

slickにはオプションが多数あるので、設定を変えてお好みのものにすることもできます。

例えば、「下の丸ぽっちいらないよ」という場合は「dots: false」とすればいいだけです。

効率アップのために、オプションのまとめ記事も作成し…よう…かな…。

※記事作成次第リンク貼ります。

画像サイズがバラバラだとどうなる？

画像サイズがバラバラだと、スライダーでは上や下に余白ができることがあります。

slick上でimgを背景画像のbackground:coverのように全体表示する方法もご紹介します。

slickは簡単で使いやすい！

今回の記事に沿っていけば基本的なスライダーは設置できるので、ぜひ使ってみてください！！