slick slider 커스텀으로 꾸미기 + jquery 이벤트 감지 + 커스텀 슬라이드 번호

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" />

.contents-group{max-width:1280px;width:100%;margin:0 auto;position:relative;z-index:99}

.gallery-etc{display:flex;align-items:center;justify-content:space-around;position:absolute;z-index:99;right:5%;top:26px}

.slick-arrow{background:none;padding:0;margin:0;font-size:0;line-height:0}

ul.slick-dots{list-style:none;padding:0;margin:0 15px}

ul.slick-dots li{display:none}

ul.slick-dots li.slick-active{display:block;color:#3960CE;font-size:22px;font-weight:700}

ul.slick-dots li.slick-active span.wh{color:#fff}

.gallery{max-width:1280px;width:96%;margin:-190px auto}

.gallery .item{display:flex !important;align-items:center;width:100%;background:#002DAC;padding:30px;box-sizing:border-box;border-radius:10px}

.gallery .item .contents{display:flex;flex-direction:column;font-size:24px;margin:30px 20px;color:#fff}

.gallery .item .contents span:nth-child(2){font-size:32px;font-weight:700}

.slick-slide img{display:block;width:230px;margin:0 35px}

<div class="contents-group">

  <div class="gallery-etc">

    <button class="visual-prev">

      <svg width="19px" height="21px" version="1.1" xmlns="http://www.w3.org/2000/svg"

      xmlns:xlink="http://www.w3.org/1999/xlink">

        <g transform="matrix(1,0,0,1,-22365.3,-3188.43)">

          <g transform="matrix(1,0,0,1,22358.5,3182.43)">

            <path d="M25.002,16C25.002,16.552 24.555,17 24.002,17L9.867,17L14.83,24.445C15.137,24.905 15.013,25.526 14.553,25.832C14.382,25.946 14.19,26 13.999,26C13.676,26 13.358,25.844 13.166,25.555L6.796,16L13.166,6.445C13.472,5.985 14.091,5.861 14.553,6.168C15.013,6.474 15.137,7.095 14.83,7.555L9.867,15L24.002,15C24.555,15 25.002,15.448 25.002,16Z"

            style="fill:white;fill-rule:nonzero;" />

          </g>

        </g>

      </svg>

    </button>

    <div class="slick-visual-paging">

    </div>

    <button class="visual-next">

      <svg width="19px" height="21px" version="1.1" xmlns="http://www.w3.org/2000/svg"

      xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">

        <g transform="matrix(1,0,0,1,-22567.3,-3188.43)">

          <g transform="matrix(-1,0,0,1,22592.3,3182.43)">

            <path d="M25.002,16C25.002,16.552 24.555,17 24.002,17L9.867,17L14.83,24.445C15.137,24.905 15.013,25.526 14.553,25.832C14.382,25.946 14.19,26 13.999,26C13.676,26 13.358,25.844 13.166,25.555L6.796,16L13.166,6.445C13.472,5.985 14.091,5.861 14.553,6.168C15.013,6.474 15.137,7.095 14.83,7.555L9.867,15L24.002,15C24.555,15 25.002,15.448 25.002,16Z"

            style="fill:white;fill-rule:nonzero;" />

          </g>

        </g>

      </svg>

    </button>

  </div>

  <div class="gallery">

    <div class="item">

      <div class="contents">

        <span>

          1번 설명입니다다

        </span>

      </div>

    </div>

    <div class="item">

      <div class="contents">

        <span>

          2번 설명입니다다

        </span>

      </div>

    </div>

    <div class="item">

      <div class="contents">

        <span>

          3번 설명입니다다

        </span>

      </div>

    </div>

  </div>

</div>

  $('.gallery').slick({

    infinite: true,

    dots: true,

    prevArrow: '.visual-prev',

    nextArrow: '.visual-next',

    appendDots: '.slick-visual-paging',

    customPaging: function(slider, i) {

      return '<span class="wh">0' + (i + 1) + '</span><span> | </span><span>0' + slider.slideCount + '</span>';

    }

  });

  $('.gallery').on('beforeChange',

  function(event, slick, currentSlide, nextSlide) {

    var calc = ((nextSlide + 1) / slick.slideCount) * 100;

  });