How to make a simple Draggable Image Carousel Slider?

<div class="container">
    <button class="slider-nav" id="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
    </button>
    <button class="slider-nav" id="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
    </button>
    <div class="carousel">
        <div class="item">
            <img src="https://images.unsplash.com/photo-1529672425113-d3035c7f4837?w=700" alt="Kid">
        </div>
        <div class="item">
            <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=700" alt="Nature">
        </div>
        <div class="item">
            <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=700" alt="Dog" />
        </div>
        <div class="item">
            <img src="https://images.unsplash.com/photo-1503127241807-fdc42d3acb95?w=700" alt="Holi festival" />
        </div>
        <div class="item">
            <img src="https://images.unsplash.com/photo-1631209121750-a9f656d28f46?w=700" alt="Fruits" />
        </div>
    </div>
</div>

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: #574769;
    padding-top: 50px;
}

svg {
    display: inline-block;
    vertical-align: middle;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

.carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.carousel .item {
    flex: 1 0 100%;
    max-height: 400px;
    scroll-snap-align: start;
}
.carousel .item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    cursor: grab;
}
.carousel.active {
    cursor: grab;
}
.carousel::-webkit-scrollbar {
    display: none;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 0;
    cursor: pointer;
    color: #555;
}
.slider-nav:hover {
    color: #000;
}

#next {
    right: 0;
}

#prev {
    left: 0;
}

const carousel = document.querySelector(".carousel");
const navBtns = document.querySelectorAll(".slider-nav");
let isDown = false,
    startX,
    scrollLeft;

const end = () => {
    isDown = false;
    carousel.classList.remove("active");
};

carousel.addEventListener("mouseleave", end);
carousel.addEventListener("mouseup", end);
carousel.addEventListener("touchend", end);

const dragStart = (e) => {
    isDown = true;
    startX = e.pageX || e.touches[0].pageX - carousel.offsetLeft;
    scrollLeft = carousel.scrollLeft;
};
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);

const move = (e) => {
    if (!isDown) return;
    e.preventDefault();
    isDragging = true;
    carousel.classList.add("active");
    const x = e.pageX || e.touches[0].pageX - carousel.offsetLeft;
    distDiff = (x - startX) * 4;
    carousel.scrollLeft = scrollLeft - distDiff;
};

carousel.addEventListener("mousemove", move);
carousel.addEventListener("touchmove", move);

const showHideNav = () => {
    let scrollWidth = carousel.scrollWidth - carousel.clientWidth;
    navBtns[0].style.display =
        carousel.scrollLeft === 0 ? "none" : "block";
    navBtns[1].style.display =
        carousel.scrollLeft - scrollWidth > -1 ? "none" : "block";
};

navBtns.forEach((element) => {
    element.addEventListener("click", () => {
        carousel.scrollLeft +=
            element.id === "prev"
                ? -carousel.clientWidth
                : carousel.clientWidth;
    });
});
carousel.addEventListener("scroll", () => {
    showHideNav();
});
showHideNav();