2024年09月12日

超簡単！slick.jsで魅力的なスライダーを作る方法【jQuery活用】

システム開発, jQuery, slick.js, スライダー

はじめに

この記事は、画像や動画の切り替えに使用されているslick.js（以下、slick）の基本的な使い方や、その応用を簡単且つ直観的に学べます。
実際に記事の内容に沿って進める事で、色々試すことができるのでぜひ試してみてください。
以下画像は、slickで作られた機能が載っている画面の例です。

202409_slick.js_01

まず、slickって何？

「 jQueryベースの、スライダーを作成するためのプラグイン 」です。
以下のような特徴があり、初心者～上級者まで世界中で多くの方に利用されています。

オプション（カスタム）が豊富
レスポンシブ対応されている（デバイスに応じた見せ方が可能）

※jQueryとは、皆さんお馴染みフロントエンド開発の登竜門、JavaScriptのライブラリです。
　JavaScriptコードをより簡単に書けるように設計されたもので、現在でも多くのWebアプリケーションで利用されています。

さっそく、実際に使ってみよう！

やり方１-初心者向け（超簡単）

以下のソースコードをコピーし、Visual Studio Codeなどのソースコードエディタでhtmlファイルを作成し、ペーストしましょう。
具体的なslickに関する説明は、以下の通りです。

jQueryとslickをCDNから読み込み、使用できるようにする。（最新バージョンを使用）
$(セレクタ).slick({オプション});をjQueryで実行する事で、セレクタの子要素がスライドできるようになる。
セレクタの子要素が複数(2つ~)ない場合、スライドできるようにならない。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Slick Slider Example</title>

    <!-- SlickのCSSをCDNから読み込む -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">

    <!-- カスタムCSSを読み込む -->
    <style>
        /* スライダーの次へ/戻る ボタンを見やすくするため */
        body {
            background: skyblue;
        }

        /* スライダーのスタイル */
        .slider {
            width: 80%;
            margin: 50px auto;
        }

        .slider img {
            width: 100%;
            border-radius: 10px;
        }
    </style>

    <!-- jQueryをCDNから読み込む -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- slickのJavaScriptをCDNから読み込む -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

    <!-- カスタムJavaScriptを追加 -->
    <script>
        $(function(){
            // sliderクラスに対して、slickを初期化する。（autoplay等のオプションは、記述しない場合デフォルト値になる。）
            $('.slider').slick({
                // スライドの自動再生を有効にする （デフォルト値： false）
                autoplay: false,
                
                // 自動再生のスピード（ミリ秒単位） （デフォルト値： 3000）
                autoplaySpeed: 3000,
                
                // スライドのナビゲーションにドットを表示 （デフォルト値：false）
                dots: false,
                
                // スライドのナビゲーションに矢印を表示 （デフォルト値：true）
                arrows: true,

                // スライドの切り替え時にフェード効果を使用 （デフォルト値：false）
                fade: false,
                
                // スライドの切り替えにかかる時間（ミリ秒単位） （デフォルト値: 300）
                speed: 300,
                
                // スライダーの項目を一度に表示する数 （デフォルト値: 1）
                slidesToShow: 1,
                
                // スライダーの項目を切り替える際にスライドする数 （デフォルト値: 1）
                slidesToScroll: 1,
                
                // スライダーがリサイズする際に自動的に調整 （デフォルト値: false）
                adaptiveHeight: false,
                
                // スライダーが最初に表示されるインデックス（0から始まる） （デフォルト値: 0）
                initialSlide: 0,
                
                // スライダーがループするかどうか （デフォルト値: true）
                infinite: true, // falseにすると、スライダーが終わってもループしない
                
                // スライダーのアイテムが画面に収まるように調整 （デフォルト値: false）
                centerMode: false, // trueにすると、現在のスライドを中央に配置
                
                // スライダーをレスポンシブにするための設定 （デフォルト値: 空配列（レスポンシブ設定なし））
                responsive: [
                    // {
                    //     breakpoint: 768, // 768px以下のスクリーン幅に対する設定
                    //     settings: {
                    //         slidesToShow: 2,
                    //         slidesToScroll: 2,
                    //         dots: true
                    //     }
                    // },
                    // {
                    //     breakpoint: 480, // 480px以下のスクリーン幅に対する設定
                    //     settings: {
                    //         slidesToShow: 1,
                    //         slidesToScroll: 1,
                    //         dots: true
                    //     }
                    // }
                ]
            });
        });
    </script>
</head>

<body>
    <!-- sliderクラス内に画像を配置 -->
    <!-- $('.slider').slick({});をjQueryで実行することで、sliderクラスの子要素（childクラス）がスライドできるようになる。 -->
    <div class="slider">
        <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+1" alt="Image 1"></div>
        <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+2" alt="Image 2"></div>
        <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+3" alt="Image 3"></div>
        <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+4" alt="Image 4"></div>
    </div>
</body>
</html>

ブラウザ表示させると、以下のような画面が表示されます。
※読込に少し時間がかかる場合があります。

202409_slick.js_02

やり方2-中級~上級者向け（実務レベル）

まずはjQueryとslickをダウンロードしよう
- jQuery公式ページの、Download jQuery..を右クリック⇒名前を付けてリンク先を保存をクリック
- slick公式ページの、get it nowタブをクリック⇒Download Nowをクリック
ダウンロードしたファイルを、プロジェクト内の好ましい位置に配置
slickを読み込みたい画面のファイル内で、配置したjQueryとslickを読み込む
- slick.jsの機能やメソッドはjQueryの機能に依存しているため、slick.jsを使用する前に必ずjQueryを読み込む必要があります。
  そのため、必ずjQuery⇒slickという順で書いてください。
```
<script src="/jquery-3.7.1.min.js"></script>
<script src="/slick.min.js"></script>
```

HTMLでスライドを行う要素を記述（例）

<div class="セレクタ">
    <!-- この中の要素がスライダー表示される -->
    <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+1" alt="Image 1"></div>
    <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+2" alt="Image 2"></div>
    <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+3" alt="Image 3"></div>
    <div class="child"><img src="https://via.placeholder.com/600x300?text=Image+4" alt="Image 4"></div>
</div>

セレクタの子要素が複数ある事を確認し、jQuery（JavaScript）でスライダー初期化処理を記述

$('セレクタ').slick({
    // slickのオプションをここに追加
    autoplay: true, // 自動再生
    autoplaySpeed: 2000, // 自動再生の間隔（ミリ秒）
    dots: true, // ドットナビゲーションの表示
    arrows: true // 矢印ナビゲーションの表示
})

画面を確認して、問題なく表示されれば完了です！

slickで使用される、便利なイベントとメソッド

$(function(){
    // slick初期化
    $('#slider').slick({
        // 自動再生有効化
        autoplay: true
    });

    $('#slider')
        // スライドが変更される直前に発火
        .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
            // currentSlide: 現在のスライドのインデックス
            // nextSlide: 次に表示されるスライドのインデックス
        })

        // スライドが変更された後に発火
        .on('afterChange', function(event, slick, currentSlide) {
            // currentSlide: 現在表示されているスライドのインデックス
        })

        // スライダー初期化時
        .on('init', function(event, slick) {
            // slick: スライダーオブジェクト
        })

        // スライダー再初期化時
        .on('reInit', function(event, slick) {
            // slick: スライダーオブジェクト
        })

        // ブレークポイントに達した時
        .on('breakpoint', function(event, slick, breakpoint) {
            // breakpoint: 適用されたブレークポイントの値
        })

        // スライダーの位置が変更された時
        .on('setPosition', function(event, slick) {
            // slick: スライダーオブジェクト
        })

        // スライダーがスワイプされた時
        .on('swipe', function(event, slick, direction) {
            // direction: スワイプされた方向 ('left', 'right', 'up', 'down')
        })

        // 遅延ロードされた画像が読み込まれた時
        .on('lazyLoaded', function(event, slick, image, imageSource) {
            // image: 読み込まれた画像要素
            // imageSource: 画像のソースURL
        });

    // 要素をスライダーに追加
    $('#slider').slick('slickAdd', 要素);

    // 指定したスライドを削除
    $('#slider').slick('slickRemove', インデックス);

    // 次のスライドに移動
    $('#slider').slick('slickNext');

    // 前のスライドに移動
    $('#slider').slick('slickPrev');

    // 自動再生を一時停止
    $('#slider').slick('slickPause');

    // 自動再生を再開
    $('#slider').slick('slickPlay');
        
    // オプションを動的に変更（optionをvalueに変更。refreshはbool値で、スライダーを完全に再初期化するか否か。）
    $('#slider').slick('slickSetOption', option, value, refresh);

    // スライダーを初期化解除
    $('#slider').slick('unslick');
});