Carousel UI 만들기 질문입니다.

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;
      }

});

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

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

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

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

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

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

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