캐러셀 스와이프

[송승환]

HTML
<div class="slid-container">
                <div class="slid-card">
                    < img src="../img/car1.png" draggable="false">
                </div>
                <div class="slid-card">
                    < img src="../img/car2.png" draggable="false">
                </div>
                <div class="slid-card">
                    < img src="../img/car3.png" draggable="false">
            </div>
CSS

.slid-total {
    overflow: hidden;

}

.slid-container {
    width: 300vw;
}

.slid-card {
    width: 100vw;
    float: left;
}

.slid-card img {
    width: 100%;
    
}

JS

var startpoint = 0;
var endpoint = 0;
var startpoint1 = 0;
var endpoint1 = 0;
var triggerpoint = 0;
var triggerpoint1 = 0;
var clickon = false;
var clickon1 = false;

document.querySelectorAll('.slid-card')[0].addEventListener('mousedown', function(e){
    startpoint = e.clientX;
    clickon = true
});

document.querySelectorAll('.slid-card')[0].addEventListener('mousemove', function(e){    
    endpoint = e.clientX
    if (clickon == true){

        document.querySelector('.slid-container').style.transform = `translateX(${e.clientX - startpoint}px)`
    }
    console.log(e.clientX)

});

document.querySelectorAll('.slid-card')[0].addEventListener('mouseup', function(e){
    clickon = false
    
    triggerpoint = endpoint - startpoint;

    if (triggerpoint < -400){
        document.querySelector('.slid-container').style.transform = `translateX(-100vw)`
        document.querySelector('.slid-container').style.transition = 'all 0.6s'
    }else {
        document.querySelector('.slid-container').style.transform = `translateX(0vw)`
        document.querySelector('.slid-container').style.transition = 'all 0.6s'
    }

    setTimeout(() => {
        document.querySelector('.slid-container').style.transition = 'none';
    }, 500);
        
});

//index 1

document.querySelectorAll('.slid-card')[1].addEventListener('mousedown', function(e){
    startpoint1 = e.clientX;
    clickon = true
});

document.querySelectorAll('.slid-card')[1].addEventListener('mousemove', function(e){    
    endpoint1 = e.clientX
    if (clickon == true){

        document.querySelector('.slid-container').style.transform = `translateX(clac(-100vw+${e.clientX - startpoint1})px)`
    }
    console.log(e.clientX)

});

document.querySelectorAll('.slid-card')[1].addEventListener('mouseup', function(e){
    clickon = false
    
    triggerpoint1 = endpoint1 - startpoint1;

    if (triggerpoint1 < -400){
        document.querySelector('.slid-container').style.transform = `translateX(-200vw)`
        document.querySelector('.slid-container').style.transition = 'all 0.6s'
    }else if(triggerpoint1 < 800){
        document.querySelector('.slid-container').style.transform = `translateX(0vw)`
        document.querySelector('.slid-container').style.transition = 'all 0.6s'
    }else {
        document.querySelector('.slid-container').style.transform = `translateX(-100vw)`
        document.querySelector('.slid-container').style.transition = 'all 0.6s'
    }

    setTimeout(() => {
        document.querySelector('.slid-container').style.transition = 'none';
    }, 500);
        
});

document.querySelectorAll('.slid-card')[2].addEventListener('mousedown', function(e){
    startpoint = e.clientX;
    clickon = true
});

document.querySelectorAll('.slid-card')[2].addEventListener('mousemove', function(e){    
    endpoint = e.clientX
    if (clickon == true){

    }
    console.log(e.clientX)

});

document.querySelectorAll('.slid-card')[2].addEventListener('mouseup', function(e){
    clickon = false
    
    triggerpoint = endpoint - startpoint;

    if (triggerpoint > 400){
        document.querySelector('.slid-container').style.transform = `translateX(-100vw)`
        document.querySelector('.slid-container').style.transition = 'all 0.6s'
    }

    setTimeout(() => {
        document.querySelector('.slid-container').style.transition = 'none';
    }, 500);
        
});

1~3번 이미지까지 스와이프는 다 잘 작동하는데 2에서 3번 이미지로 스와이프 전 후로 이미지가 움직이지 않습니다.
mouseup 이벤트가 끝나면 작동하긴 하는데 그 전의 이벤트가 작동하지 않아서 질문드립니다.

[codingapple]

document.querySelectorAll('.slid-card')[2].addEventListener('mousemove', function(e){    
    endpoint = e.clientX
    if (clickon == true){
    }
    console.log(e.clientX)
   
});
여기 if문이 비어있어서 아무동작 안하는듯요

[송승환]

감사합니다

[글쓴이]

글