Carousel UI 만들기 질문입니다.

[MD]

before 버튼을 선생님 코드대로 만들면  '오른쪽버튼 오른쪽버튼 왼쪽버튼' 이 순서로 누르면 세번째 사진에서 바로 첫번째 사진으로 가게 됩니다.

 

이걸 해결해보려고 별 짓을 다 해보고 있는데 이걸 어떻게 해결하면 좋을까요? 

[codingapple]

별짓하던 코드를 올려주시면 됩니다 

[MD]

const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

let currentImg = 1;
let imgLength = document.getElementsByTagName('img').length;

prevBtn.addEventListener('click', function(){
    if (currentImg === 1) {
      document.querySelector('.slide-container').style.transform = 'translateX(0vw)';
       } else {
       document.querySelector('.slide-container').style.transform = 'translateX(' + (currentImg-3) + '00vw)';
       currentImg = currentImg - 1;
       }
});

nextBtn.addEventListener('click', function(){
    document.querySelector('.slide-container').style.transform = 'translateX(-' + currentImg + '00vw)';
     if (currentImg < imgLength-1) {
         currentImg = currentImg + 1;
      }

});

 

제가 나름 생각해본 코드가 이건데요. 이렇게 하면 문제가 하나 생깁니다. 예를 들어서 세번째 사진까지 갔다가 하나씩 왼쪽으로 가는건 잘 되지만, 첫번째 사진에서 두번째 사진으로 간 다음 바로 다시 첫번째 사진으로 가려고 하면 첫번째 클릭에선 동작을 안 하고 한 번 더 누르면 그 때 가서 동작을 하더라고요. 

 

도저히 어떻게 해야될지 감이 잘 안 오네요 ㅠㅠ

[codingapple]

이전버튼누르면

document.querySelector('.slide-container').style.transform = 'translateX(-' + (currentImg-2) + '00vw)'; 

이래야 잘보일듯요
3개 이상 넘어가는 문제는 if문을 하나 더 쓰거나

아니면 transform 시키는 부분을

if (currentImg < imgLength) if문안에 넣거나 그러면 됩니다

[MD]

자바스크립트 동작은 이해했습니다! 감사합니다.

근데 그 vw 관련해서 질문이 좀 있습니다. 그 컨테이너를 왼쪽으로 옮기려고 -100vw, -200vw를 준 것이라고 전 이해를 했는데, 왜 사진을 오른쪽으로 옮길 때도 -를 주는건가요?

[codingapple]

-200vw 주면 셋째 사진보이고

-100vw 주면 둘째 사진 보일 뿐이라 그렇게 주는 것일 뿐입니다 

[MD]

translateX가 x축을 기준으로 div 박스를 이동하는 것으로 저는 이해했는데요, 그래서 -부호가 붙으면 왼쪽으로 +부호는 오른쪽으로 이렇게 이동하는건가라고 생각했습니다.

 

그래서 세번째 사진까지 갔으면 다시 slide-container가 오른쪽으로 가야되니 + 부호를 줘야 하는 것이 아닌가 하고 생각했습니다.

 

혹시 translateX가 이동할 때 제가 이해한대로 작동하는 것이 아니라 어떤 기준점을 두고 그에 따른 값만 주면 특정 사진으로 이동하는것인가요? 

[codingapple]

document.querySelector('.slide-container').style.transform = 'translateX(-100vw)';

이거는 기존값에 -100vw 만큼 더하라는 뜻이 아니라

스타일을 transform : translateX(-100vw) 로 아예 바꿔치우라는 뜻입니다

 

[글쓴이]

글