超有名スライダープラグインslickのエンドロール的な使い方とプログレスバーのカスタムについて

今更感があってなかなか記事にできなかったslickですが、なんだかんで使いやすく応用しやすいので役立ちそうな内容に絞ってまとめてみました。

slickの基本的な設定
- 読み込み
- 基本的な設定をする
slickでエンドロールのように滑らかにスライドさせる
slickに進捗プログレスバー付きスライダーにする
slickの各スライダーのdotsをプログレスバーにする
サンプル
まとめ

slickの基本的な設定

読み込み

以下よりslickのソースをダウンロードします。
公式サイト：slick-carousel

ダウンロードした中身はこんな感じです。

jQuery依存なのでjquery-3.5.1.min.jsも読み込みます。
slickとして読み込むファイルはslick.css、slick-theme.css、slick.js （slick.min.js）になります。

<script src="js/jquery-3.5.1.min.js"></script>
<!-- slick -->
<link href="css/slick.css" rel="stylesheet" type="text/css">
<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<script src="js/slick.min.js"></script>

基本的な設定をする

slick基本形として上記のような簡単なスライドを作成します。

スライダーにしたい親要素にslick.jsで使うクラスslide_demo01を設定し、子要素が実際にスライドする部分になります。

<ul class="slide_demo01 wrap_list">
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img01.jpg" alt=""></li>
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img02.jpg" alt=""></li>
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img03.jpg" alt=""></li>
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img04.jpg" alt=""></li>
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img05.jpg" alt=""></li>
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img01.jpg" alt=""></li>
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img02.jpg" alt=""></li>
    <li><img src="https://uhaha.net/wp-content/uploads/2021/10/img03.jpg" alt=""></li>
</ul>

slickのオプションは以下の様に設定します。

<script type="text/javascript">
$(document).ready(function(){
    $('.slide_demo01').slick({
        arrows: true,//next、prevの矢印の表示
        dots : true,//ドットの表示
        autoplay: true//自動再生
    });
});
</script>

slick-theme.css内でローディング画像のajax-loader.gifを設定しているので使用する場合は適宜調整します。

slickでエンドロールのように滑らかにスライドさせる

カルーセル表示で、映画のエンドロールの様に滑らかに左右や上下にスライドさせる方法です。

通常の設定からオプションを少し変更するのみで簡単にできます。
autoplaySpeed: 0にして制止する時間を無くします。
イージングもcssEase: 'linear'とし調整します。

    $(document).ready(function(){
        $('.slide_demo02').slick({
            arrows: false,
            autoplay: true,
            autoplaySpeed: 0,//制止するスピード
            speed: 5000,//移動する時間
            cssEase: 'linear',//イージングで均一を設定
            slidesToShow:4,//表示するスライドの数
            slidesToScroll: 1//移動するスライドの数
        });
    });

slickに進捗プログレスバー付きスライダーにする

次のスライドが表示されるまでのプログレスバー付きスライダーもよく見かけます。
以下のcodepenを参考にしてみました。

See the Pen Slick Progressbar by Felix (@fjacobi) on CodePen.

プログレスバー付きスライダー

slickの各スライダーのdotsをプログレスバーにする

上記をカスタムしてdotsをプログレスバーにしてみました。
各スライダーの数プログレスバーを整列させ、各スライドの進捗を視覚化したデザインになります。

まずslickで育成されるdotsのアクティブな状態をプログレスバーに指定します。

$bar = $('.slide_demo03 .slick-dots li.slick-active button');

リセット処理をしている部分で再度dotsのアクティブな状態を設定しなおします。

function resetProgressbar() {
  $bar = $('.slide_demo03 .slick-dots li.slick-active button');//←
  $bar.css({
   width: 0+'%' 
   });
  clearTimeout(tick);
}

ドット部分をCSSで整形します。

.slide_demo03 .slick-dots {
    bottom: 0px;
    display: flex;
    justify-content: space-between;
}
.slide_demo03 .slick-dots li {
    position: relative;
    display: inline-block;
    width: calc(100% / 7 - 3px);
    height: 4px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #ccc;
}
.slide_demo03 .slick-dots li.slick-active button {
    background: #ff0000;
    　width: 0;
}
.slide_demo03 .slick-dots li button:before {
    content: none;
}

dotsがプログレスバーのスライダー