【簡単】Slick.jsでスライダーを実装する

JavaScript

JavaScript slick.jsでスライダーを実装する

簡単な設定でWebサイトにスライダーを実装したい方

※本ページはプロモーションが含まれています

1 概要
2 前提
3 完成形
4 手順
- 4.1 slickjsの導入
- 4.2 コードの実装
5 まとめ

概要

slick.jsは簡単にカルーセルスライダーが設置できるjQueryベースのJavaScriptのライブラリで、特に難しい設定も必要なくキレイでかっこいいスライダーが設置できます。ShopifyなどのECサイト、コーポレートサイトなど様々なサイトで使われていますが、特にECサイト上ではその演出効果は購買意欲を高めることが期待されます。この機会にぜひslick.jsを使いこなしてカッコイイサイトを作成してください。

公式はコチラ

↓デモはコチラ

DEMO

前提

slick.jsはjQueryを使用しますので、予め下記のようにjQueryを使えるようにしておいてください。なお記述する（読み込む）順番が重要ですので、slick.jsの読み込みより先に記述してください（他のjQueryを使うライブラリについても同様に、jQueryを先に読み込むようにしてください）

<!-- bodyの閉じタグ直前あたりに記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

完成形

完成したコードが以下となります

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>slick.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<style>
    .container {
        max-width: 800px;
        margin: auto;
        padding: 0 2rem;
    }

    .sliders1{
        margin-bottom: 5rem;
    }

    .sliders__item img {
        width: 100%;
    }
    .slick-prev:before, .slick-next:before {
        color: #727272;
    }
</style>
<div class="container">
    <p>sliders1</p>
    <div id="sliders" class="sliders sliders1">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
    </div>
    <p>sliders2</p>
    <div id="sliders2" class="sliders sliders2">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
    </div>
    <p>sliders3</p>
    <div id="sliders3" class="sliders sliders3">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/w-yuRFSkbVw">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/eOpewngf68w">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/jFCViYFYcus">
        </div>
</div>
    <p>sliders4</p>
    <div id="sliders4" class="sliders sliders4">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/w-yuRFSkbVw">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/eOpewngf68w">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/jFCViYFYcus">
        </div>
    </div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
    $('.sliders1').slick({
        autoplay: true,
        slidesToShow: 1,
        autoplaySpeed: 2000,
    });
    $('.sliders2').slick({
        centerMode: true,
        autoplay: true,
        slidesToShow: 1,
        autoplaySpeed: 3000,
        centerPadding: "10%",
    });

    $('.sliders3').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        autoplay: true,
        autoplaySpeed: 4000,
        responsive: [
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
    $('.sliders4').slick({
        cssEase: "linear",
        speed: 3000,
        infinite: true,
        slidesToShow: 3,
        autoplay: true,
        autoplaySpeed: 0,
        arrows:false,
        responsive: [
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
</script>
</body>
</html>

手順

slick.jsの導入
コードの実装
オプションの使い方
まとめ

slickjsの導入

slick.jsをインストールします。インストールはファイルをダウンロードしてインストールする方法と、CDNを利用する方法がありますが、CDNの方が断然楽なので今回はCDNを利用します。

なおどちらの方法でも必要なのは以下のファイルです。「slickがうまく動かない！」といった際は、まず下記のファイルが正しく読み込まれているか確認してみてください。

slick.css
slick-theme.css
slick.min.js

これらのファイルをCDNで読み込むため、下記のように記述してください。

<!-- head内に記述-->

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="style.css">

<!-- bodyの閉じタグ直前あたりに記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

これで下準備は完了です。

コードの実装

まずslick.jsの基本形は以下の通りとなります。

下記の’セレクタ’にhtmlで設定したセレクタ名を記入します。

$('セレクタ').slick({
//ここにオプション
});

【html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>slick.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <p>sliders1</p>
    <div id="sliders" class="sliders sliders1">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
    </div>
    <p>sliders2</p>
    <div id="sliders2" class="sliders sliders2">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
    </div>
    <p>sliders3</p>
    <div id="sliders3" class="sliders sliders3">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/w-yuRFSkbVw">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/eOpewngf68w">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/jFCViYFYcus">
        </div>
</div>
    <p>sliders4</p>
    <div id="sliders4" class="sliders sliders4">
        <div class="sliders__item">
            <img src="https://source.unsplash.com/78A265wPiO4">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/_RBcxo9AU-U">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/ndN00KmbJ1c">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/w-yuRFSkbVw">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/eOpewngf68w">
        </div>
        <div class="sliders__item">
            <img src="https://source.unsplash.com/jFCViYFYcus">
        </div>
    </div>
<footer></footer>
</body>
</html>

ここでのポイントは.sliders1〜.sliders4でラップされた各クラス名です。

上記のslick.jsの基本形で言うと、このようになります。

$('.sliders1').slick({ 
//ここにオプション 
});

そして各クラスの下に表示したい画像を記述していきます。

<div id="sliders" class="sliders sliders1">
    <div class="sliders__item">
        <img src="https://source.unsplash.com/78A265wPiO4">
    </div>
    <div class="sliders__item">
        <img src="https://source.unsplash.com/_RBcxo9AU-U">
    </div>
    <div class="sliders__item">
        <img src="https://source.unsplash.com/ndN00KmbJ1c">
    </div>
</div>

【CSS】

cssは特に気をつける点はありません。

1点、.slick-prev:before,と .slick-next:before は「次」と「前」のボタンですが、デフォルトだと白くて存在が分からないのでグレーにしています。

<style>
    .container {
        max-width: 800px;
        margin: auto;
        padding: 0 2rem;
    }

    .sliders1{
        margin-bottom: 5rem;
    }

    .sliders__item img {
        width: 100%;
    }
    .slick-prev:before, .slick-next:before {
        color: #727272;
    }

【JavaScript】

今回はオプションの違いによって様々な表現ができることを説明するために、スライダーを4種類用意しました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
    $('.sliders1').slick({
        autoplay: true,
        slidesToShow: 1,
        autoplaySpeed: 2000,
    });
    $('.sliders2').slick({
        centerMode: true,
        autoplay: true,
        slidesToShow: 1,
        autoplaySpeed: 3000,
        centerPadding: "10%",
    });

    $('.sliders3').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        autoplay: true,
        autoplaySpeed: 4000,
        responsive: [
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
    $('.sliders4').slick({
        cssEase: "linear",
        speed: 3000,
        infinite: true,
        slidesToShow: 3,
        autoplay: true,
        autoplaySpeed: 0,
        arrows:false,
        responsive: [
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
</script>

ここでは特によく使用されるオプションを使ってスライダーを実装しています。

プロパティ	説明	default値
autoplay	自動再生	false
autoplaySpeed	自動再生のスピード	3000ミリ秒（3秒）
infinite	無限ループの設定	true
speed	スライドやエフェクトのスピード	300ミリ秒（0.3秒）
slidesToShow	1度に表示される要素の数	1
centerMode	前と後ろの要素を表示	false
centerPadding	前と後ろの要素が表示される際のサイズ（pxか%）	50px（centerModeがtrueの場合）
cssEase	アニメーションの動き加減速	ease
responsive	設定値以下の場合の仕様（サイズは”breakpoint”で設定	none
pauseOnHover	スライダーの上にマウスがある場合にスライドを停止	true(autoplayがtrueの場合)

※特に一番最後の”pauseOnHover”は盲点で、急に「スライダーが動かなくなった！」と慌てる人がいますが大体これが原因です。

なおその他のオプションについては公式にも詳しく載っているので是非参考にしてください。

公式はコチラ

まとめ

いかがだったでしょうか？

シンプルなサイトもいいですが、スライダーがあるだけで印象はかなりアグレッシブになります。特にShopifyなどのECサイトでは商品をスライドで流す演出は非常に多いと思います。ちょっとした演出で購入率が上がる可能性があるならば、積極的に導入したいですよね。

今回ご紹介したスライド以外にもオプションで様々なスライダーを実装できますので、皆さんも是非挑戦してみてください。

なおこの他にもJavaScriptを使えば様々なアニメーションやエフェクトが実装できます。以下に人気のオンライン講座を掲載していますので、ぜひ参考にしてみてください。