JSFiddle - React, Tailwind, and code Playground

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide">Slide 11</div>
      <div class="swiper-slide">Slide 12</div>
      <div class="swiper-slide">Slide 13</div>
      <div class="swiper-slide">Slide 14</div>
      <div class="swiper-slide">Slide 15</div>
      <div class="swiper-slide">Slide 16</div>
      <div class="swiper-slide">Slide 17</div>
      <div class="swiper-slide">Slide 18</div>
      <div class="swiper-slide">Slide 19</div>
      <div class="swiper-slide">Slide 20</div>
    </div>
  </div>

  <!-- pagination -->
  <div class="page">
    <a class="prev">prev</a>
      <ul>
      </ul>
      <a class="next">next</a>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">

CSS

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;
    }

    .swiper-container {
      width: 100%;
      height: 30%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    /* .swiper-pagination-bullet {
      width: 30px;
      height: 30px;
    } */

    .pagination-swiper-container {
      width: 100%;
      height: 10%;
    }

    .pagination-swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .page{margin: auto; width: fit-content;}
    .page a{display: inline-block;}
    .page ul {width: fit-content; display: inline-block;}
    .page ul li{display: inline-block; width: 20px; height: 20px; text-align: center; font-weight: bold; background:red; color:#fff}

JavaScript

$(function(){
        createSwiper();
        createPagination(1);
        eventBind();
    });

    var swiper;
    function createSwiper(){
        swiper = new Swiper('.swiper-container', {
        pagination: {
        el: '.swiper-pagination',
		dynamicBullets: true,
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
              },
      }
        });
    }

    function createPagination(pageIdx){
        var length = $(".swiper-container .swiper-slide").length;
        var pageListSize = 5;  // 한 페이지에 노출할 블렛 갯수
        var totalPage = parseInt((length - 1) / pageListSize) + 1;

        var currentPage = pageIdx;

        // 페이저
        var pageStart = parseInt((currentPage - 1) / pageListSize) * pageListSize + 1;
        var pageEnd = pageStart + pageListSize;
        
        //초기화 
        var $pageBody = $(".page ul");
        $pageBody.html("");
            
        for(var i = pageStart; i < pageEnd; i++){
            var className = (currentPage == i) ? "active" : "";
            var $li = $("<li data-index='" + i + "' class='"+ className + "'>" + i + "</li>");
            $pageBody.append($li);
        }

         //페이지 클릭 
        $(".page li").on("click", function(){
            var index = $(this).data("index");
            swiper.slideTo(index-1);
        });
    }

    function eventBind(){
        //이전페이지, 다음 페이지 이벤트 바인드 
        $(".page .prev").on("click", function(){
            var index = parseInt($(".page li.active").data("index") / 5);

            if(index != 0){
                index = index -1;
                createPagination(index * 5 + 1);
            }
        });

        $(".page .next").on("click", function(){
            var length = $(".swiper-container .swiper-slide").length;
            var pageListSize = 5;  // 한 페이지에 노출할 블렛 갯수
            var totalPage = parseInt((length - 1) / pageListSize) + 1;
            var...