무한루프되는 캐러셀 제작 중입니다. 무한루프가 되긴 하는데 카드가 2장씩 넘어가서 카드 한 장 만큼의 여백이 생깁니다. 어디가 이상한 지 봐주시면 감사하겠습니다.

      $('#previous-btn').click(function(){

       let index = 0
       const cardWidth = $('.carousel-item').width()+20; // 카드 하나의 넓이+마진만큼 구함

       index-=1; // 이전 버튼을 누를 때 마다 index가 줄어듬

        $('#carousel-wrapper').css({'transform':'translateX('+cardWidth*index+'px)'}); // 카드의 넓이만큼 카드가 왼쪽으로 이동함
        $('#carousel-wrapper').css({'transition':'0.2s'}); // 부드럽게 움직임

        var firstitem = $('.carousel-item').first()
        $('.carousel-item').last().after(firstitem);
        // 무한루프를 만들기 위해 이전버튼을 누르면 앞에 있는 카드가 제일 뒤로 이동