코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2

[lhk]

넘버 버튼과 다음, 이전 버튼을 번갈아 누르거나 할 때 영역 밖으로 슬라이드 되거나 엉뚱하게 동작하고 있습니다.
어느 부분을 수정해야 할까요?

    const btns = document.querySelectorAll('.slide-btn');
    const len = document.querySelectorAll('.slide-box').length;

    btns.forEach((data, idx) => {
      btns[idx].addEventListener('click', function () {
        document.querySelector('.slide-container').style.transform = 'translateX(calc(' + idx * -100 + 'vw))'
      })

    });

    let i = 1;
    document.querySelector('.btn-next').addEventListener('click', function () {
      if (i < len) {
        document.querySelector('.slide-container').style.transform = 'translateX(calc(' + i * -100 + 'vw))';
        i = i + 1;
      }

    })
    document.querySelector('.btn-prev').addEventListener('click', function () {
      i = i - 1;
      if (i >= 1) {
        document.querySelector('.slide-container').style.transform = 'translateX(calc(' + ((i - 1) * -100) + 'vw))';

      }

    })

[codingapple]

calc() 빼고 그냥 써봅시다 
 i = i - 1;
이것도 if문 안으로 옮겨야할듯요

[글쓴이]

글