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

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

##slickでページャーを変更できる「customPaging」
「customPaging」というオプションで自由に変更できます。

```javascript
$('.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,
   });
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="yoshi090" data-slug-hash="qBNqVdX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="slick__pager__1">
  <span>See the Pen <a href="https://codepen.io/yoshi090/pen/qBNqVdX">
  slick__pager__1</a> by yoshida (<a href="https://codepen.io/yoshi090">@yoshi090</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="yoshi090" data-slug-hash="LYZXeqR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="slick__pager__4">
  <span>See the Pen <a href="https://codepen.io/yoshi090/pen/LYZXeqR">
  slick__pager__4</a> by yoshida (<a href="https://codepen.io/yoshi090">@yoshi090</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これより下は蛇足になってしまいますが、愚考のログとして残しておきます。
##数字を降順にする
「最新話を一番左にしたいから数字を逆にしてほしい」と言われたら。

```html
<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>
```

```javascript
customPaging: function(slider, i, j) {
      j = 5;
      return $('<div class="c5-dots__num">').text('第' + (j-(i+1)) + '章');
    }
```
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="yoshi090" data-slug-hash="BazQmoM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="slick__pager__2">
  <span>See the Pen <a href="https://codepen.io/yoshi090/pen/BazQmoM">
  slick__pager__2</a> by yoshida (<a href="https://codepen.io/yoshi090">@yoshi090</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

```html
<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>
```

```javascript
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)) + '章');
      }
    }
```
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="yoshi090" data-slug-hash="yLJVPON" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="slick__pager__3">
  <span>See the Pen <a href="https://codepen.io/yoshi090/pen/yLJVPON">
  slick__pager__3</a> by yoshida (<a href="https://codepen.io/yoshi090">@yoshi090</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

以上です。

##参考
[slick - にほんご。](https://tr.you84815.space/slick/settings/customPaging.html)