Carousel (이미지 슬라이드) 직접만들기 2 : Next 버튼 만들기

안녕하세요~ 저도 Next버튼을 눌러보니 자꾸 넘어가서 게시판에서 글을 찾아보다가 보게되었습니다.

변수가 3일때 이미지 이동시키지 말라고 조건을 걸면 된다고 하신 답변에

이렇게 해보았는데요...

혹시 좀더 간단한 방법이 또 있을까요..?

var 지금보이는사진 = 1;

$('.slide-next').click(function() {

    $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
    if ( 지금보이는사진 < 3 ) {
        지금보이는사진 = 지금보이는사진 + 1;
    }else if( 지금보이는사진 == 3 ){
      $('.slide-container').css('transform', 'translateX(-200vw)');
    }
});

var 지금보이는사진 = 1;

$('.slide-next').click(function() {

    $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
    if ( 지금보이는사진 < 3 ) {
        지금보이는사진 = 지금보이는사진 + 1;
      $('.slide-container').css('transform', 'translateX(-200vw)');
    }
});

아~ 이렇게 말씀하시는거군요!

그런데 혹시 저게 마지막 translateX(-200vw) 이부분에 -200vw 처럼 끝을 알 경우 말고~

for문으로 반복으로 임의으 수까지 돌려서 

마지막 위치를 설정해야할땐 무엇을 사용하면 좋을까요..?

let 지금보이는사진갯수 = $('.slide-box').length;

$('.slide-next').click(function() {
    $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
     if ( 지금보이는사진 < 지금보이는사진갯수 ) {
          지금보이는사진 = 지금보이는사진 + 1;
    }
});
 

이런식으로 코딩해봤는데 이미지3에서 다음으로 넘어가는데 문제가 무엇인가요??

$('.slide-next').click(function() {
    $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
     if ( 지금보이는사진 < 지금보이는사진갯수 -1 ) {
          지금보이는사진 = 지금보이는사진 + 1;
    }
});

이렇게  했을 때는 제대로 동작합니다. 그냥 이렇게 하는게 맞는건가요?