for문 안에서 setTimeout 실행

Bora Im·2020년 4월 13일
0

Slick 슬라이더 페이지네이션을 커스텀하는 과정에서,

  • 클릭해서 해당 슬라이드를 볼수있도록 슬라이드 개수만큼의 버튼이 필요하고
  • 자동 swipe 되거나 직접 swipe 했을때
  • 그것들은 한몸인것처럼 누적된 인디케이터 게이지를 채워야한다. *매끄러운 트랜지션이 중요!
  • 슬라이드 요소는 개발에서 뿌려지기 때문에 개수는 고정이 아님 (10개 이하)

대략 요런 모습👇

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>
  • 장점 : 클릭시 전환 가능.
  • 문제 : 1개씩 이동할때는 매끄러우나, 슬라이드를 건너뛸 경우 여러개의 pager 다함께 트랜지션 발생

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>
  • 장점 : 인디게이터 게이지 누적이 자연스럽지만
  • 문제 : 버튼 기능x. 초기 너비값 지정이 필요

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>
  • 지금보다 뒤로 갈 경우 : 나 다음부터 시작해서 그 친구까지 한칸씩 클래스 on을 추가
  • 갈곳이 출발보다 앞인경우 : 나부터 시작해서 앞으로 한칸씩 이동하며 클래스 on을 제거

// 일단 구현은 성공적

스케줄링: setTimeout 과 setInterval
자바스크립트: for문 안에 setTimeout 함수 사용하는 방법 (IIFE, 재귀함수)

0개의 댓글