프론트엔드/javaScript, jQuery
[jQuery] slick-slide Paging Custom (Counter 표시하기)
celine_e
2023. 6. 29. 16:48
구현해야하는 슬라이드의 페이지 네이션 화면 첨부
- 현재 보여지는 슬라이드 페이지 / 총 슬라이드 갯수가 보여져야 합니다.
* 사용한 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를 작성해줍니다. )