jQueryプラグイン : slick.jsで様々なスライドショーを作成する手順

本記事では、jQueryベースのプラグインとして公開されているslickを用いて、スライドショーを作成するための方法をご紹介させて頂いております。ダウンロードの手順からJavaScriptコードの記述(オプションの設定)からテーマCSSの変更によるレイアウトの配置の変更まで、ご紹介させて頂きます。

✅   jQueryのプラグインを理解することが出来る
✅   sickのダウンロード方法~活用方法が身に付く
✅   slickに関する設定情報の記述の仕方が分かる
✅   slick_thema.cssをカスタマイズし、デザインの変更を行えるようになる

jQueryのプラグインとは??

Webサイト制作/Webアプリ開発のどちらにおいても用いられているjQueryになりますが、初心者の方からすると中々、一からアニメーションを作成してくれと言われてもピンとこない部分が多いと思います。
そこで、他の人が使えるように公開しているもの(JavaScript関連の開発を行っているエンジニアなどが開発したもの)をダウンロードし、編集中のファイルにて読み込んであげることでその機能を使用することが出来るものが、プラグインという形で公開されています。

使い方を覚えることで便利な機能が簡単に使えるようになりますので、初心者の方も気軽に扱うことが可能です。

活用する上で必要な作業

    jQuery本体を読み込む
    プラグインごとに準備されているcss/jsファイルをダウンロード
    ダウンロードしてきた各種ファイルを読み込む
    プラグインごとの機能の設定情報をJavaScriptとして書いてあげる
    準備されているデザイン等を読み込む(classやdata)

slickの準備

slickとは??

slickはjQueryベースで公開されているプラグインで、スライダーを作成することが出来ます！
レスポンシブにも対応し、タブレットやスマホなどの各種端末の画面サイズに合わせた設定が可能です。

また、IE8以上のブラウザ(Google ChromeやFireFoxなどもOK)であれば完全対応で、カスタマイズの幅も広いため、世界的に活用されています。

ローカルにslickをダウンロード

では、早速、slickを使い方を理解していくために環境から整えていきましょう！
まずは、slickの公式ページより必要なファイルをダウンロードしていきます。

以下のURLをクリックして、公式サイトへアクセスしましょう。

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!

上記のように公式サイトへアクセス出来たら、以下の手順でダウンロードを開始していきましょう。

1. 赤枠で囲っている「 get it now 」をクリック
2. 「 get it now 」に遷移できたら、Dowmload Now をクリック

Dowmload Now をクリックすると、以下のようなダイアログが表示されますので、保存先をデスクトップに指定し、保存ボタンをクリックしましょう。

続いて、デスクトップに保存されているのを確認できたら、zipファイルのため、解凍していきましょう。
解凍した場合の状態などについては、以下の画像を参考にしてください。

ここまでできたら、ダウンロードの手順は終わりになりますので、次は、slickの使い方を確認していく前にベースとなるHTMLファイルとCSSファイルを準備していきましょう。

必要なファイルを準備

以下のコードをコピペでOKですので、ベースとなるHTMLファイルとCSSファイルを作成してください。

※ 保存先は、slick-[バージョン]フォルダ/slickフォルダ内になります。

なお、画像に関しては、今回4枚ほどお好きなものを準備してください。

各種ファイルと同様にslickフォルダ内にimagesフォルダを準備し、その中に画像を配置しましょう。

<html> 
    <head>
        <meta charset="UTF-8">
        <title>slick_sample</title>
    </head>
    <body>
        <h2>[ 1枚 : スライド(自動有り) ]</h2>
        <ul>
            <li>
                <a href="#"><img src="画像01" width="600px" height="400px"></a>
            </li>
            <li>
                <a href="#"><img src="画像02" width="600px" height="400px"></a>
            </li>
            <li>
                <a href="#"><img src="画像03" width="600px" height="400px"></a>
            </li>
            <li>
                <a href="#"><img src="画像04" width="600px" height="400px"></a>
            </li>
        </ul>
    </body>
</html>

h2 { 
    margin-left:150px;
    margin-top:20px;
}

現在のslickフォルダ内は、以下のようになっております。
ここまで、問題なさそうでしたら早速、使い方をみていきましょう！

slickの使い方

今回は、シンプルな自動なスライド機能付きのスライドショーの作り方をslickの使い方と合わせて、順番に確認していきましょう。

jQuery本体を読み込む

まずは、jQuery本体を読み込む必要がありますので、slick_sample.htmlのheadタグ内を以下のように修正しましょう。

<head>   
    <meta charset="UTF-8">
    <title>slick_sample</title>
    <!-- jQuery本体を読み込む -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="slick_sample.css">
</head>

ダウンロードしたslick関連ファイルを読み込む

次に、同じくheadタグ内ではありますが、slick関連ファイル(slick.css, slick.js, slick_thema.css)を読み込んでいきましょう。

<head>   
    <meta charset="UTF-8">
    <title>slick_sample</title>
    <!-- jQuery本体を読み込む -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="slick_sample.css">
    <!-- slick : メインのCSSファイルを読み込む -->
    <link rel="stylesheet" type="text/css" href="slick.css" media="screen" />
    <!-- slick : 各種デザインに関するCSSファイルを読み込む(矢印の位置など) -->
    <link rel="stylesheet" type="text/css" href="slick-theme.css" media="screen" />
    <!-- slick : メインのjsファイルを読み込む -->
    <script src="slick.js"></script>
</head>

必要なclassとCSSを追加で記述する

続いて、slickを動作させていく上で、必要なclassを読み込んでいきます。

こちらで記述するclassについては、slick.cssに記述されているものになりますので、参考程度に覚えておきましょう。

<!-- class="slider"を追加 -->
<ul class="slider">
    <li>
        <a href="#"><img src="画像01" width="600px" height="400px"></a>
    </li>
    <li>
        <a href="#"><img src="画像02" width="600px" height="400px"></a>
    </li>
    <li>
        <a href="#"><img src="画像03" width="600px" height="400px"></a>
    </li>
    <li>
        <a href="#"><img src="画像04" width="600px" height="400px"></a>
    </li>
</ul>

cssファイルにも以下のコードを追加しましょう。
こちらは、スライド幅などのデザインを設定しています。

/* 　 class: sliderに追加で指定する      */
.slider {
    /*   スライドの幅を設定   */
    width:600px;
 　　/*   スライドの高さを設定   */
    height:350px;
    /*   外側の余白を設定   */
    margin:40px 90px;
}

slickの設定情報をjavaScriptにて記述する

最後に、slickの設定情報をjavaScriptコードとして、の直上に追加していきます！

<body>
    <h2>[ 1枚 : スライド(自動有り) ]</h2>
    <ul class="slider">
        <li>
            <a href="#"><img src="画像01" width="600px" height="400px"></a>
        </li>
        <li>
            <a href="#"><img src="画像02" width="600px" height="400px"></a>
        </li>
        <li>
            <a href="#"><img src="画像03" width="600px" height="400px"></a>
        </li>
        <li>
            <a href="#"><img src="画像04" width="600px" height="400px"></a>
        </li>
    </ul>

    <!--  slickを動作させる上で欠かせないJavaScriptコードの記述 (設定情報<オプション>) -->
    <script>
        $(document).ready(function(){
            $('.slider').slick({
　　　　　　　　　 // ドット状のナビを追加(下に並んでいる黒点)
                dots:true,
                // スライドの自動再生
                autoplay:true,
            });
        });
    </script>
</body>

オプション一覧

設定内容(オプション)については、状況に応じて多く準備されています。
その中でも使用されることの多い、代表的なオプションを紹介しますので、slickを実装する際に参考にしてみてください。

slick_thema.cssを編集する

矢印やスライドの下に表示するナビゲーションのアイコンや位置などを変更したい場合は、slick_thema.cssを修正してあげる必要があります。

今回は、色や位置を変更してみたいと思いますが、同じclassが定義されている箇所を以下のコードを参考に修正してあげてください。(コピペOKですが、上書きするようにしてください。)

/* dotsの設定 */
.slick-dots{
    position: absolute;
    /*  下から-40pxの位置に配置する   */
    bottom: -40px;
    display: block;
    width: 100%;
    padding: 0;
    right: -15px;
    list-style: none;
    text-align: center;
}

/*  ----------------   */

/*  矢印の設定  */
.slick-prev:before,
.slick-next:before{
　　　　font-family: 'slick';
　　　　font-size: 30px;
　　　　line-height: 1;   
　　　　top:-30px;
　　　　opacity: .75;
　　　　color: orange;
　　　　-webkit-font-smoothing: antialiased;
　　　　-moz-osx-font-smoothing: grayscale;
}

/*  ----------------   */


/*  左側の矢印の設定  */
.slick-prev{
     left: 80px;
     z-index: 100;
}

[dir='rtl'] .slick-prev{
    right: -25px;
    left: auto;
} 

/*  ----------------   */


/*  右側の矢印の設定　*/
.slick-next{
    right: 50px;
}

[dir='rtl'] .slick-next{
    right: auto;
    left: -25px;
}


/*  ----------------   */


/*  矢印のアイコンの設定 */
/* 左側の矢印 */
.slick-prev:before{
    content: '←';
}

[dir='rtl'] .slick-prev:before{
    content: '→';
}

/* 右側の矢印 */
.slick-next:before{
    content: '→';
}

[dir='rtl'] .slick-next:before{
    content: '←';
}