안녕하세요 반복문 써서 확장성 있는 코드로 만들어 보려고 했는데 잘안되서 질문 드립니다.
이동은 잘되는데, mousemove일 때 움직인 거리 만큼 드래그가 잘 안되서요.. 어떤게 잘못 되었을까요..
<div style="overflow:hidden;position:relative;">
<div class="img-container">
<div class="img-cont">
<img src="img.jpg">
</div>
<div class="img-cont">
<img src="img.jpg">
</div>
<div class="img-cont">
<img src="img.jpg">
</div>
</div>
<button class="next-btn">next</button>
<button class="prev-btn">prev</button>
</div>
<div class="btn-box">
<button id="slide1">1</button>
<button id="slide2">2</button>
<button id="slide3">3</button>
</div>
<script>
let startLocation = 0;
let click = 0;
for(let i=0;i<$('.img-cont').length - 1;i++){
$('.img-container .img-cont').eq(i).on('mousedown',function(e){
startLocation = e.clientX;
console.log(startLocation);
click = 1;
});
$('.img-container .img-cont').eq(i).on('mousemove',function(e){
let 이동거리 = e.clientX - startLocation;
if(click == 1){
$('.img-container').css(transform, translateX(${이동거리}px - ${i}00vw));
}
});
$('.img-container .img-cont').eq(i).on('mouseup',(e)=>{
console.log(e.clientX - startLocation);
if(e.clientX - startLocation < -150){
$('.img-container').css('transform','translateX('+ (-1 - i) + '00vw)').css('transition', 'transform 0.5s');
}else{
$('.img-container').css('transform','translateX(' + i*-1 + 'vw)').css('transition', 'transform 0.5s');
}
setTimeout(function(){
$('.img-container').css('transition', 'none');
}, 500)
click = 0;
})
}
</script>
