مشکل در کاروسل

سلام دوستان این کاروسل برای نمایش تصاویر محصول است مشکلی که داره اینه کاربر در موبایل تصویر اول را به درستی میبیند اما پس از اینکه به چپ و راست میکشه کاروسل هیچ تصویری نشون داده نمیشه

<div class="lg:col-span-1">
    <div class="w-full relative overflow-hidden" id="carousel">
        <div class="flex transition-transform duration-500 ease-in-out" id="slides-container">
            <div class="min-w-full relative">
                <img src="https://picsum.photos/800/600?random=1" 
                     class="w-full h-48 md:h-60 object-cover rounded-xl shadow-lg">
            </div>
            <div class="min-w-full relative">
                <img src="https://picsum.photos/800/600?random=2" 
                     class="w-full h-48 md:h-60 object-cover rounded-xl shadow-lg">
            </div>
            <div class="min-w-full relative">
                <img src="https://picsum.photos/800/600?random=3" 
                     class="w-full h-48 md:h-60 object-cover rounded-xl shadow-lg">
            </div>
        </div>
        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2" id="dots-container"></div>
    </div>
</div>

const carousel = document.getElementById('carousel');
const slidesContainer = document.getElementById('slides-container');
const dotsContainer = document.getElementById('dots-container');

let currentIndex = 0;
const totalSlides = document.querySelectorAll('[class*="min-w-full"]').length;
let isAnimating = false;
let touchStartX = 0;
let touchEndX = 0;

// Initialize dots
function createDots() {
    dotsContainer.innerHTML = '';
    for (let i = 0; i < totalSlides; i++) {
        const dot = document.createElement('div');
        dot.className = `w-2 h-2 rounded-full transition-all duration-300 cursor-pointer ${i === 0 ? 'bg-white w-4' : 'bg-white/50'}`;
        dot.addEventListener('click', () => goToSlide(i));
        dotsContainer.appendChild(dot);
    }
}

// Update active dot
function updateDots(index) {
    dotsContainer.querySelectorAll('div').forEach((dot, i) => {
        dot.className = `w-2 h-2 rounded-full transition-all duration-300 cursor-pointer ${i === index ? 'bg-white w-4' : 'bg-white/50'}`;
    });
}

// Slide animation
function goToSlide(index) {
    if (isAnimating) return;
    isAnimating = true;

    currentIndex = (index + totalSlides) % totalSlides;
    slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
    updateDots(currentIndex);

    setTimeout(() => {
        isAnimating = false;
    }, 500);
}

carousel.addEventListener('touchstart', e => {
    touchStartX = e.touches[0].clientX;
});

carousel.addEventListener('touchend', e => {
    touchEndX = e.changedTouches[0].clientX;
    const delta = touchStartX - touchEndX;
    const swipeThreshold = 30;

    if (Math.abs(delta) > swipeThreshold) {
        if (delta > 0) {
            goToSlide(currentIndex + 1);
        } else {
            goToSlide(currentIndex - 1);
        }
    }
});

// Initialize
createDots();

@Raymond