2021.07.28

【Youtube解説】オプションを追加してslick sliderをカスタマイズ

• slick
• HTML
• JavaScript

YouTubeにUPした「オプションを追加してslick sliderをカスタマイズ」について解説します。
スライダーの導入に最適なSlickの導入からカスタマイズまで解説します。

1slick sliderの導入

slick sliderの導入は他のjQueryプラグインと同様、ローカルに保存する方法とCDNを読み込む方法があります。動画ではローカルに保存する方法で紹介しています。

■ローカルに保存して使う方法

slickの公式ページからダウンロードします。「get it now」→「Download Now」でファイル一式をダウンロードできます。 ダウンロードが完了したらzipフォルダを開き、「slick」フォルダの以下3つのファイルを自分の任意のローカルフォルダにコピペします。

次に上記3つをhtmlファイルに読み込ませます。「slick.css」は必ず「slick-theme.css」より上に記述しましょう。また「slick.min.js」もjqueryを読み込んだ後(下)に記述します。

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

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

■CDNを使う方法

CDNを使うときは、cdnjs.comというサイトを使うと便利です。google検索で「slick cdnjs」と検索すると出てきます。ここで出てきたURLをコピーして、上と同様HTMLに読み込みます。
動画内でも紹介していますが、jqueryの読み込みもこのcdnjs.comを使うと簡単ですので、使ってみてください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

2slick sliderの作成

スライダーさせたい部分の外に任意のクラスをつけたボックスを作成します。動画内では「.my-slider」とクラス名をつけたdiv要素になります。この.my-sliderには横並びにするCSSなどは必要なく、slickのプラグインが横並びにしてくれます。 ただスライダーの幅を決めないと画面をオーバーしてしまうので「width」だけは設定してあげましょう。
HTMLが準備できたら、任意のJSファイル(例としてmy.jsとします。)にslickを動かすための記述をします。記述の仕方は簡単で、先ほど設定した.my-sliderをターゲットに.slick()関数を設定するだけです。

$(function(){
    $(".my-slider").slick();
});

こうすると、スライダーの形が出来上がります。デフォルトではslickのfontsを使った矢印が設定してあるので、矢印がスライダーの左右にある形で表示されます。今回は「fonts」フォルダをローカルに保存していないため、デバイス文字の矢印が表示されているかと思います。

3Font AwesomeでArrow(矢印)を作成する

デフォルトの矢印の代わりにFont Awesomeのアイコンを使う方法をご紹介します。

■Font Awesomeの導入

前述したCDNを使う方法と同じように、cdnjs.comを使ってFont Awesomeの「all.min.css」をhead内で読み込みます。これで自由にアイコンを使えるようになります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

■デフォルトの矢印を消す

Font Awesomeの準備ができたら、すでに設定してあるデフォルトの矢印を削除します。「slick-theme.css」を開き「.slick-prev:before」と「.slick-next:before」のcontentに設定してある「←」「→」をそれぞれ削除します。

.slick-prev:before
{
    content: '';
}
.slick-next:before
{
    content: '';
}

■Font Awesomeの矢印を設定する

任意の矢印を自分で設定したい場合はslickのオプションを使ってjqueryで任意のHTMLを作成します。my.jsに以下のオプションを追加します。

「”」のなかにFont Awesomeで持ってきたi要素をそのままペーストします。これで矢印がHTMLに反映するので、後はCSSをいじって位置を調節すると完了です。

$(function(){
    $(".my-slider").slick({
        prevArrow:'<i class="fas fa-arrow-left"></i>',
        nextArrow:'<i class="fas fa-arrow-right"></i>'
    });
});

4slickのカスタマイズ一覧

slickにはたくさんのオプションが用意されており、スライダー周りのことを自分なりにカスタマイズすることができます。ここではほぼ全てのオプションをご紹介します。特によく使うオプションにはをつけているので要チェックです。

5ページャーにページ数を表示する方法

大まかに説明すると、ページャーを表示する領域をjqueryで作成してcssで整えることになります。初期表示のページャーの作成から、現在のページ数が増減する動きの実装の順で解説します。

■初期表示のページャーを作成する

$(function(){
    $(".my-slider").on('init', function(event, slick){
        $(this).append('<div class="slick-counter"><span class="current-num"></span> / <span class="total-num"></span></div>');
        $(".current-num").text(slick.currentSlide + 1);
        $(".total-num").text(slick.slideCount);
    });
    $(".my-slider").slick();
});

まずslickを実行する前にinitイベントを使って.my-sliderの中にページャーの領域を作成します。今回はjqueryのappend()を使ってdiv(.slick-counter)の中に「現在のページ番号(.current-num) / 総ページ数(.total-num)」となるような領域(HTML)を作成します。
.current-numにはslick.currentSlideで現在の枚数を、.total-numにはslick.slideCountで総数を取得して、.text()で表示しておきます。これで初期状態でのカウント数が表示されるようになります。
次に現在のページ数が増減する動きを実装します。

■現在のページ数が増減する動きの実装

$(".my-slider").on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $(".current-num").text(nextSlide +1);
});

slickのbeforeChangeというイベントを使ってnextSlideで次のスライドの番号を取得し、現在のページ番号(.current-num)の中の数字を.text()で書き換えることでページ数に合わせて増減するようになります。

最後に

動画をまだ見ていない方は是非チェックしてみてください！音声はBGMのみなので、再生速度を上げて流し見するのがおすすめです！