무한루프되는 캐러셀 제작 중입니다. 무한루프가 되긴 하는데 카드가 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);
// 무한루프를 만들기 위해 이전버튼을 누르면 앞에 있는 카드가 제일 뒤로 이동