【jQuery】高機能スライダープラグイン「Slick」の使い方

簡単に実装できて高機能なスライダー系jQueryプラグイン「Slick」の使い方。
レスポンシブ、タッチデバイス対応でオプション設定も豊富。

DEMOページを作ってみました。
１つ目のスライドは初期設定のまま、２つ目のスライドは色々とカスタマイズしてます。

DEMO jQuery Slick | MISOBLOG

Slickのダウンロード

公式サイト

slick – the last carousel you’ll ever need

ナビゲーションの「get it now」をクリックした先の「Download Now」ボタンからデータ一式をダウンロードできます。

ダウンロードしたSlickのZIPファイルを解凍し、その中から下記のファイルを使用します。

• slick.css
• slick.min.js
• slick-theme.css
• ajax-loader.gif
• fonts（フォルダ）

CSSとJSの読み込み

<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

「slick-theme.css」を編集することで、スタイルのカスタマイズを行えます。

スライドさせるコンテンツ（HTML）

HTML

<div class="slick1">
    <div><img src="images/img1.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img2.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img3.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img4.jpg" width="800" height="600" alt=""></div>
    <div><img src="images/img5.jpg" width="800" height="600" alt=""></div>
</div>

JavaScript

基本的なスライダーは1行書くだけで完成です。

$(function() {
    $('.slick1').slick();
});

オプション設定はこのような感じで書きます。

$(function() {
    $('.slick2').slick({
        autoplay: true,
        dots: true,
        centerMode: true,
        centerPadding: '20%',
        slideToShow: 1,
        focusOnSelect: true,
        speed: 1000,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    centerMode: false
                }
            }
        ]
    });
});

Slickのオプション