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

쓴생님 하기와 같이 코딩시
처음에는 잘  작동하는데
처음에 다음2번누르고 다시 이전2번눌러서 1번화면일때 
다시 다음 누르면 2번화면으로 안가고, 급발진하면서 슈우웅 넘어가버립니다.

ㅠㅠ

추가로 다음버튼 최대치? 도 length 활용하면 더 이상 나올 사진이없으면 안넘어가게 할 수 있나욤?

<script>
      var now = 1;
        $('.slide-1').on('click', function(){
            document.querySelector('.slide-container').style.transform='translateX(0vw)'
        })

        var now = 2;
        $('.slide-2').on('click', function(){
            document.querySelector('.slide-container').style.transform='translateX(-100vw)'
        })

        var now = 3;
        $('.slide-3').on('click', function(){
            document.querySelector('.slide-container').style.transform='translateX(-200vw)'
        })

var non = 3;
        $('.before').on('click', function(){
          if( non == 3){
            $('.slide-container').css('transform', 'translateX(-100vw)');
            non --;
          }
          else if( non == 2){
            $('.slide-container').css('transform', 'translateX(0vw)');
            non --;
          }
        }); 
        
        var now = 1;
        $('.next').on('click', function(){
          $('.slide-container').css('transform', 'translateX(-'+ now + '00vw)');
          now ++;
        })