[jQuery] slick-slide Paging Custom (Counter 표시하기)

구현해야하는 슬라이드의 페이지 네이션 화면 첨부

- 현재 보여지는 슬라이드 페이지 / 총 슬라이드 갯수가 보여져야 합니다.

* 사용한 slick-slide의 version은 Version 1.8.0 입니다. 

 

1. 마크업을 해줍니다.

<div class="main-slide">
    <div class="slide">
    <div class="slide">
    <div class="slide">
    <div class="slide">
</div>
<div class="pagingInfo"></div>

2. slick-slide를 사용하기 위한 script입니다.

var $status = $('.pagingInfo'); //paging 이 들어갈 div 혹은 p 혹은 어떠한 영역
var $slickElement = $('.main-slide'); //slide가 되어야하는 div

$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
      var i = (currentSlide ? currentSlide : 0) + 1;
      $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: false,
      dots: false,
})

3. css 스타일링

.pagingInfo {
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 62.55%;
  left: 190px;
  letter-spacing: 14px;
  font-size: 17px;
}

letter-spacing으로 간격을 넓게 해주고,  position:absolute; 로 위치를 조정해줍니다!

(각자의 디자인에 맞춘 css를 작성해줍니다. )