캐러셀 슬라이드 스와이프 응용문제 축약

[손성호]

 var swipestart = 0;
        var click = false;
        var cnt = $('.slide-box').length;

        for (i = 0; i < cnt; i++) {
            $('.slide-box').eq(i).on('mousedown', function(e) {
                console.log(e.clientX);
                swipestart = e.clientX;
                click = true;

            })

            $('.slide-box').eq(i).on('mousemove', function(e) {

                if (click == true) {
                    console.log(e.clientX - swipestart);
                    $('.slide-container').css('transform', `translateX(calc(${e.clientX - swipestart}px - ${i}00vw))`)
                }
                
            })

            $('.slide-box').eq(i).on('mouseup', function(e) {
                click = false;
                if (i == 0) {
                    if ((e.clientX - swipestart) < -200) {
                        $('.slide-container')
                            .css('transition', 'all 0.5s')
                            .css('transform', `translateX(-100vw)`);
                    } else {
                        $('.slide-container')
                            .css('transition', 'all 0.5s')
                            .css('transform', `translateX(0vw)`);
                    }
                }

                if ((e.clientX - swipestart) < -200) {
                    $('.slide-container')
                        .css('transition', 'all 0.5s')
                        .css('transform', `translateX(-${i+1}00vw)`);
                } else if ((e.clientX - swipestart) > 200) {
                    $('.slide-container')
                        .css('transition', 'all 0.5s')
                        .css('transform', `translateX(-${i-1}00vw)`);
                } else {
                    $('.slide-container')
                        .css('transition', 'all 0.5s')
                        .css('transform', `translateX(-${i}00vw)`);
                }

                setTimeout(() => {
                    $('.slide-container').css('transition', 'none')
                }, 500)
                

            })

        }

1번문제는 풀었는데 반복문으로 축약하려하니 잘 안되네요 
1번째 그림카드 클릭했다가 떼면 사진 세장이 한꺼번에 넘어갑니다
크롬 관리자로 확인해보니 
 $('.slide-container').css('transform', `translateX(calc(${e.clientX - swipestart}px - ${i}00vw))`)
부분에서 제가 의도한건 1번카드 리스너에선 -000vw 2번카드 리스너에선 -100vw 같은걸 원했는데
1번카드를 눌렀다가 떼니 -300vw으로 한꺼번에 가 있습니다. 문제가 뭘까요.. 

[codingapple]

for (i = 0; 
for문에 let 빠진듯요

[글쓴이]

글