Slick 슬라이더 페이지네이션을 커스텀하는 과정에서,
대략 요런 모습👇
Slick 기본 페이지네이션 구조는 이렇다.
ul.slick-dots > li.slick-active
try 1
우선 분리된 버튼의 누적된 게이지 표현은 .slick-active 만으로 해결이 안되기 때문에
beforeChange 이벤트에 swipe시 li에 each() 메서드를 돌려
슬라이드 전환시 다음 슬라이드(nextSlide) 이하의 슬라이드에 클래스 on을 붙여보았다.
<script>
$('.slick-dots').find('li').each(function(){
if ($(this).index() > nextSlide) {
$(this).removeClass('on');
} else {
$(this).addClass('on');
}
});
</script>
try 2
아닌걸 알면서도 한번 해본 방법😐
여러 친구가 한마음으로 움직이는것보다,
한마음으로 움직이려면 요소가 하나여야 맞다는 고지식한 생각으로
progressbar + 별점 방식 (bg이미지 채움)
<div class="pagination-progressbar"><span class="pagination-progressbar-fill"></span></div>
<script>
slider.on('init', function(slick){
bar.css('width', slide.length * 56);
fill.css('width', 56);
});
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
fill.css('width', (nextSlide+1) * 56);
});
</script>
finally
<script>
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
if (currentSlide < nextSlide) {
for (var i = currentSlide+1, j = 0; i <= nextSlide; i++,j++) {
(function (i) {
var intervalID = setTimeout(function() {
$('.slick-dots').find('li').eq(i).addClass('on');
}, 300*j);
})(i);
}
} else if (currentSlide > nextSlide) {
console.log(currentSlide, nextSlide)
for (var i = currentSlide, j = 0; i > nextSlide; i--,j++) {
(function (i) {
var intervalID = setTimeout(function() {
$('.slick-dots').find('li').eq(i).removeClass('on');
}, 300*j);
})(i);
}
}
});
</script>
// 일단 구현은 성공적
스케줄링: setTimeout 과 setInterval
자바스크립트: for문 안에 setTimeout 함수 사용하는 방법 (IIFE, 재귀함수)