slick.jsを使用してページャーに数字を適用する

スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。
ある時スライドをポップアップさせて動画を表示させる依頼がありました。
仕様としては
「ページャーには第○章と順に入れてね」
「スマホの時はページャーをドットにしてね」
というもので、やり方を調べて実装しました。以下備忘録です。

slickでページャーを変更できる「customPaging」

「customPaging」というオプションで自由に変更できます。

$('.c5-slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    draggable: false,
    arrows: true,
    prevArrow: '<span class="prev-arrow">前</span>',
    nextArrow: '<span class="next-arrow">次</span>',
    customPaging: function(slider, i) {
      return $('<div class="c5-dots__num">').text('第' + (i+1) + '章');
    },
    dotsClass: 'c5-dots',
    dots: true,
   });

See the Pen slick__pager__1 by yoshida (@yoshi090) on CodePen.

追記（11/11/2020）

配列を使用したらどんな順番でも関係なくシンプルに実装できるとの意見を頂きました。
ほんとそうですね。ということでここに追記します。

See the Pen slick__pager__4 by yoshida (@yoshi090) on CodePen.

これより下は蛇足になってしまいますが、愚考のログとして残しておきます。

数字を降順にする

「最新話を一番左にしたいから数字を逆にしてほしい」と言われたら。

<section>
      <div class="c5-slider_wrap">
        <ul class="c5-slider">
          <li class="c5-slider_content">
            4章
          </li>
          <li class="c5-slider_content">
            3章
          </li>
          <li class="c5-slider_content">
            2章
          </li>
          <li class="c5-slider_content">
            1章
          </li>
        </ul>
        <!-- /.c5-slider -->

      </div>
      <!-- /.c5-slider_wrap -->
    </section>

customPaging: function(slider, i, j) {
      j = 5;
      return $('<div class="c5-dots__num">').text('第' + (j-(i+1)) + '章');
    }

See the Pen slick__pager__2 by yoshida (@yoshi090) on CodePen.

途中に番外編を入れる

「ごめん、動画で２章番外編があるから４章と３章の間に入れてね」と言われたら。

<section>
      <div class="c5-slider_wrap">
        <ul class="c5-slider">
          <li class="c5-slider_content">
            4章
          </li>
          <li class="c5-slider_content">
            2章番外編
          </li>
          <li class="c5-slider_content">
            3章
          </li>
          <li class="c5-slider_content">
            2章
          </li>
          <li class="c5-slider_content">
            1章
          </li>
        </ul>
        <!-- /.c5-slider -->

      </div>
      <!-- /.c5-slider_wrap -->
    </section>

customPaging: function(slider, i, j) {
      j = 6;
      if(i >= 0 && i < 1){
        return $('<div class="c5-dots__num">').text('第' + (j - (i+2)) + '章');
      }else if(i == 1){
        return $('<div class="c5-dots__num">').text('第2章番外編');
      }else{
        return $('<div class="c5-dots__num">').text('第' + (j - (i+1)) + '章');
      }
    }

See the Pen slick__pager__3 by yoshida (@yoshi090) on CodePen.

以上です。

参考

slick - にほんご。