안녕하세요
강의 잘 듣고 있습니다.
코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2 강의 수강 중 질문이 있습니다.
// 다음 버튼
var now = 1; // 현재 사진 변수
document.querySelector('.next').addEventListener('click', function() {
if (now == 3) { // 마지막 장에서 '다음'을 누르면 첫 번째 장이 나오도록
document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
now = 1;
} else {
document.querySelector(".slide-container").style.transform = "translateX(-" + now + "00vw)";
now++;
}
// if (now == 1) { // 현재 사진이 1번이면 -> 2번 보여주기
// document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
// now++;
// } else if (now == 2) { // 현재 사진이 2번이면 -> 3번 보여주기
// document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
// now++;
// } else if (now == 3) { // 현재 사진이 3번이면 -> 다시 1번 보여주기
// document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
// }
});
// 이전 버튼
document.querySelector('.before').addEventListener('click', function() {
if (now == 1) { // 첫 번째 장에서 '이전'을 누르면 마지막 장이 나오도록
document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
now = 3;
} else {
document.querySelector(".slide-container").style.transform = "translateX(-" + (now - 2) + "00vw)";
now--;
}
// if (now == 1) { // 현재 사진이 1번이면 -> 3번 보여주기
// document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
// now = 3;
// } else if (now == 2) { // 현재 사진이 2번이면 -> 1번 보여주기
// document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
// now--;
// } else if (now == 3) { // 현재 사진이 3번이면 -> 2번 보여주기
// document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
// now--;
// }
});
1.
다음, 이전 버튼만 누르면 잘 실행되는데
숫자 버튼을 누르고서 다음, 이전 버튼을 누르면 이상하게 실행이 됩니다.
특히 2번 버튼을 누르고 이전 버튼을 누르면 3번째 사진이 나옵니다.
2.
1번째 사진에서 이전 버튼을 누르면 3번째(마지막 장) 사진이 나오고,
3번째 사진(마지막 장)에서 다음 버튼을 누르면 1번째 사진이 나왔으면 좋겠는데
3번 버튼을 누르고 다음 버튼을 누르면 2번째 사진이 나옵니다,,,
(이 상태에서 다음 버튼을 2번 누르면 정상적으로 1번째 사진이 나오고요)
뭐가 문제인지 아무리 들여다봐도 모르겠습니다ㅠㅠ
