Swiper.jsでページネーションの複数利用について

Swiperでの複数のページネーション表示についてお聞きしたいです。
エフェクトはfadeでサムネイルのページネーションと「bullets」のページネーションが二つあるスライドを作成したいのですが、
ページネーションを複数指定する何も表示されない状態となってしまいます。
そもそも複数表示することが可能かもわかっていないのですが、実現することはできますでしょうか。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    #wrapper {
      max-width: 300px;
      margin: 20px auto;
    }

    img {
      width: 100%;
      vertical-align: bottom;
    }

    .thumblist {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .thumblist-item.current img {
      opacity: 1;
    }

    .thumblist-item img {
      opacity: .5;
      width: 150px;
    }
  </style>
</head>

<body>
  <div class="thumblist"></div>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://takblog.site/wp-content/themes/takblog/assets/img/blanks/post19_1.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="https://takblog.site/wp-content/themes/takblog/assets/img/blanks/post19_2.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="https://takblog.site/wp-content/themes/takblog/assets/img/blanks/post19_3.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="https://takblog.site/wp-content/themes/takblog/assets/img/blanks/post19_4.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="https://takblog.site/wp-content/themes/takblog/assets/img/blanks/post19_5.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="https://takblog.site/wp-content/themes/takblog/assets/img/blanks/post19_6.jpg" alt="" /></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    $(function() {
      const thumbClass = 'thumblist-item';
      const mytap = window.ontouchstart === null ? "touchstart" : "click";

      const mySwiper = new Swiper('.swiper-container', {
        effect: 'fade',
        speed: 1500,
        autoplay: {
          delay: 2000
        },
        pagination: [{
          el: '.thumblist',
          type: 'custom',
          renderCustom: function(swiper, current, total) {
            const slides = swiper.slides;
            let html = '';
            for (let i = 0; i < total; i++) {
              if (current == i + 1) {
                html = html + `<div class="${thumbClass} current" data-slideto="${i}">${slides[i].innerHTML}</div>`;
              } else {
                html = html + `<div class="${thumbClass}" data-slideto="${i}">${slides[i].innerHTML}</div>`;
              }
            }
            return html;
          }
        }, {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }]
      });

      const clickThumbs = (() => {
        const thumbItems = document.getElementsByClassName(thumbClass);
        for (let i = 0; i < thumbItems.length; i++) {
          thumbItems[i].addEventListener(mytap, ((e) => {
            let index = e.currentTarget.dataset.slideto;
            mySwiper.slideTo(index, 1500, true);
            // autoplayオプションを使わない場合は、以下をコメントアウトをする
            setTimeout(mySwiper.autoplay.start, 3000);
          }), false);
        }
      });

      clickThumbs();
      mySwiper.on('slideChange', clickThumbs);
    });
  </script>
</body>

</html>