SLICK 슬라이드 페이징 넣기

SLICK 슬라이드에서 원하는 부분에 1/5 와 같은 페이징을 넣는 방법이다.

​

<script src="/js/jquery-3.1.1.min.js"></script>

<script src="/js/slick.min.js"></script>

​

<!-- 페이징이 들어가는 부분 -->

<div class="numcount sPage1"><span class="now">1</span><span> / 3</span></div>

<div class="main_news_sld">

<ul>

<li>test1</li>

</ul>

<ul>

<li>test2</li>

</ul>

<ul>

<li>test3</li>

</ul>

</div>

​

$('.main_news_sld').slick({

infinite: false,

speed: 300,

initialSlide : 0,

slidesToShow: 1,

slidesToScroll: 1,

vertical:true,

});

​

$('.main_news_sld').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){

var i = (currentSlide ? currentSlide : 0) + 1;

$('.sPage1').html("<span class='now'>"+i+"</span><span> / "+slick.slideCount+"</span>");

});