Carousel Without Arrows Or Background

<div x-data="carousel()" class="flex mt-4 gap-4">
    <!-- Dots -->
    <div class="relative flex items-center mx-2 w-44 h-10 px-4 rounded-full overflow-hidden">
        <!-- Dots -->
        <div class="flex justify-center space-x-2">
            <template x-for="index in totalSlides" :key="index">
            <span @click="goToSlide(index - 1)"
                  :class="currentIndex === index - 1 ? 'w-8 bg-black' : 'w-2 bg-black/60'"
                  class="h-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"></span>
            </template>
        </div>
    </div>
</div>

<script>
    function carousel() {
        return {
            currentIndex: 0,
            totalSlides: 5,
            nextSlide() {
                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
            },
            prevSlide() {
                this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
            },
            goToSlide(index) {
                this.currentIndex = index;
            }
        };
    }
</script>