마우스 클릭과 드레그는 되지만, 화면이 넘어가지 않습니다. vw를 반대로 주었을 때는 다음사진으로 이동은 하는데, 드레그가 100이 되지 않더라도
다음 사진으로 이동합니다.
무엇이 문제인지 답변 부탁드립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 슬라이드(캐러셀)</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div style="overflow: hidden;">
<div class="container">
<div class="slide-box">
< img src="images/car1.png" alt="">
</div>
<div class="slide-box">
< img src="images/car2.png" alt="">
</div>
<div class="slide-box">
< img src="images/car3.png" alt="">
</div>
</div>
</div>
<script>
let 시작좌표 = 0;
let 눌렀냐 = false;
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
눌렀냐 = true;
});
$('.slide-box').eq(0).on('mousemove', function(e){
if (눌렀냐 === true) {
$('.container').css('transform', `translateX( ${e.clientX - 시작좌표}px )`)
}
});
$('.slide-box').eq(0).on('mouseup', function(e){
눌렀냐 = false;
if (e.clientX - 시작좌표 < -100) {
$('.container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)');
} else {
$('.container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
}
setTimeout(()=>{
$('.container').css('transition', 'none')
}, 500)
});
</script>
</body>
</html>
