캐러셀 스와이프 애니메이션 관련 질문

        <div class="wrapper" style="overflow: hidden;">
            <div class="slide-container transition-all">
                <div class="slide-box">
                    < img src="https://codingapple.com/wp-content/uploads/2022/02/car1.png" alt="" draggable="false">
                </div>
                <div class="slide-box">
                    < img src="https://codingapple.com/wp-content/uploads/2022/02/car2.png" alt="" draggable="false">
                </div>
                <div class="slide-box">
                    < img src="https://codingapple.com/wp-content/uploads/2022/02/car3.png" alt="" draggable="false">
                </div>
            </div>

            <button class="slide-btn">1</button>
            <button class="slide-btn">2</button>
            <button class="slide-btn">3</button>
            <button id="prev-btn">prev</button>
            <button id="next-btn">next</button>
        </div>
 
let cnt = 0;
let width = 33.333333;
let slideContainer = $(".slide-container"), slideBtns = $(".slide-btn");
let positions = [];
for (let i = 0; i < slideBtns.length; i++) {
    positions[i] = i * -width;
    slideBtns.eq(i).click(() => {
        slideContainer.css("transform", `translateX(${positions[i]}%)`);
        cnt = i;
    });
}
$("#prev-btn").on("click", () => {
    cnt = (cnt + positions.length - 1) % positions.length;
    slideContainer.css("transform", `translateX(${positions[cnt]}%)`);
});
$("#next-btn").on("click", () => {
    cnt = (cnt + 1) % positions.length;
    slideContainer.css("transform", `translateX(${positions[cnt]}%)`);
});
// mouse event
let mouseDown = false;
let mouseDownPoint = 0;
slideContainer.on("mousedown", (e) => {
    mouseDownPoint = e.clientX;
    mouseDown = true;
    slideContainer.removeClass("transition-all");
});
slideContainer.on("mousemove", (e) => {
    if (mouseDown) {
        let mouseMoveDist = mouseDownPoint - e.clientX;
        if (mouseMoveDist >= 300) {
            cnt += (cnt + 1 > positions.length - 1 ? 0 : 1);
            slideContainer.css("transform", `translateX(${positions[cnt]}%)`);
            slideContainer.addClass("transition-all");
        }
        
        else if (mouseMoveDist <= -300) {
            cnt += (cnt - 1 < 0 ? 0 : -1);
            slideContainer.css("transform", `translateX(${positions[cnt]}%)`);
            slideContainer.addClass("transition-all");
        }
        else {
            slideContainer.css("transform", `translateX(calc(${-mouseMoveDist}px + ${positions[cnt]}%))`);
        }
    }
    else {
        slideContainer.addClass("transition-all");
    }
});
slideContainer.on("mouseup", (e) => {
    mouseDown = false;
    slideContainer.css("transform", `translateX(${positions[cnt]}%)`);
    slideContainer.addClass("transition-all");
});
slideContainer.on("mouseover", (e) => {
    mouseDown = false;
    slideContainer.css("transform", `translateX(${positions[cnt]}%)`);
    slideContainer.addClass("transition-all");
});
 
캐러셀을 스와이프 해서 넘길 때 애니메이션이 없으면 제대로 작동하는데 transition: all 1s를 주면 끝까지 넘어가버립니다.
애니메이션이 작동하는 동안 이벤트 리스너가 작동해서 다음 칸으로 바로 넘어간다고 생각합니다.
애니메이션이 끝나고 이벤트 리스너가 다시 작동하도록 하려면 어떻게 해야 하나요?