2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
안녕하세요 선생님! 자바스크립트 기초 부분 잘 하고있다가 막판에 캐러셀 터치이벤트에서 몇일째 안풀립니다..ㅠㅠ 코드 보여드릴게요..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css">
<title>Document</title> </head> <body> <div class="slide"> <div class="slide-container"> <div class="slide-box"> < img src="img/car1.png" draggable="false"> <p>1</p> </div> <div class="slide-box"> < img src="img/car2.png" draggable="false"> <p>2</p> </div> <div class="slide-box"> < img src="img/car3.png" draggable="false"> <p>3</p> </div> <div class="slide-box"> < img src="img/car3.png" draggable="false"> <p>4</p> </div> <div class="slide-box"> < img src="img/car3.png" draggable="false"> <p>5</p> </div> </div> </div>
<button class="prev">이전</button> <button class="next">다음</button>
<script>
let count = 0;
let slideContainer = document.querySelector('.slide-container'); let slide = document.querySelectorAll('.slide-box'); let slideWidth = document.querySelector('.slide-box').offsetWidth; let slideLength = document.querySelectorAll('.slide-box').length; let slideContainerWidth = slideWidth * slideLength;let prev = document.querySelector('.prev'); let next = document.querySelector('.next');window.onload = function () { slideContainer.style.width = slideContainerWidth + 'px'; prev.classList.add('disable'); }// 클릭할때마다 slidwidth 값이 두배씩 오르거나 내려가기 // slideContainerWidth * count / slideLength <- 넘길때마다 현재 container의 왼쪽 기준 위치(width) 알려줌(예: 1 slide는 0 / 2 slide는 400) prev.addEventListener('click', function() { count--;if(count === 0) { // count = 0; slideContainer.style.transform = 'translate3d(0,0,0)'; prev.classList.add('disable'); } else { slideContainer.style.transform = `translate3d(-${ (slideContainerWidth * count / slideLength) }px, 0, 0)`; prev.classList.remove('disable'); } });next.addEventListener('click', function() { count++; if(slideLength === count) { count = 0; slideContainer.style.transform = 'translate3d(0,0,0)'; prev.classList.add('disable'); } else { slideContainer.style.transform = `translate3d(-${ slideContainerWidth * count / slideLength }px, 0, 0)`; prev.classList.remove('disable'); } });let startClient = 0; let moveClient = 0; let click = false;
slide.forEach((item) => { item.addEventListener('mousedown', function (e) { startClient = e.clientX; click = true; });// mousemove item.addEventListener('mousemove', function(e) { // 마우스 클릭하고 떼기 전까지 움직인 좌표크기 moveClient = e.clientX - startClient;if (click === true) { if (moveClient < 0) { // next slideContainer.style.transform = `translate3d(${ moveClient - (slideContainerWidth * count / slideLength) }px, 0, 0)`; } else { // prev slideContainer.style.transform = `translate3d(-${ moveClient - (slideContainerWidth * count / slideLength) }px, 0, 0)`; } } });// mouseup item.addEventListener('mouseup', function () { click = false;// prev if (moveClient > 0 && moveClient > 100) { if(count === 0) { slideContainer.style.transform = `translate3d(0, 0, 0)`; } else { count--; slideContainer.style.transform = `translate3d(${ (slideContainerWidth * count / slideLength) }px, 0, 0)`; console.log('prev', count); } // next } else if (moveClient < 0 && moveClient < 100) { count++; slideContainer.style.transform = `translate3d(-${ (slideContainerWidth * count / slideLength) }px, 0, 0)`; console.log('next', count); } }); });</script> </body> </html>
일단 버튼으로 next, prev는 잘 돌아가는데요 마우스 무브, 클릭 이벤트에서는 prev가 안돼요.. mouseup할때 count++가 돼서 그 값에 따라 moveClient - (slideContainerWidth * count / slideLength 이 바뀌어야 하는데 next 는 count가 잘 올라가서 저 값이 원하는대로 잘 나오는데 prev는 mouseup할때 count--가 들어가서 mousedown시 count--가 되지 않아 원하는 대로 transform값이 나오지 않습니다.. mousedown에 count-- 넣어봤는데도 안돼고ㅠㅠ.. 몇일째 해결이 안되니 답답해요 count 값으로 하면 안되는걸까요..ㅠㅠ
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.