Image slider using alpine.js and tailwind CSS

slider.html

 <div class="flex flex-col justify-center items-center w-10/12 max-w-6xl mx-auto">
    <div class="relative"
         x-data="{
            activeImage: 1,
            images: [ '/media/slider1.jpg', '/media/slider2.jpg', '/media/slider3.jpg']
         }">

        <!-- Image slides -->
        <template x-for="(image,index) in images" :key="index">
            <div x-show="activeImage === index + 1"
                 x-transition:enter="transition-all ease-in-out duration-1000"
                 x-transition:enter-start="opacity-0 transform"
                 x-transition:enter-end="opacity-100 transform"
                 >
                <img x-bind:src="image" class="max-w-full shadow-xl shadow-gray-900/75">
                <p x-text="activeImage + ' / ' + images.length"></p>
            </div>
        </template>

        <!-- Nav Arrows -->
        <div class="absolute top-[45%] -left-5 md:-left-8 lg:-left-14">
            <button class="cursor-pointer text-lg md:text-2xl lg:text-5xl text-white"
                    x-on:click="activeImage = activeImage === images.length ? 1 : activeImage + 1">
                <i class="fa-solid fa-circle-arrow-left"></i>
            </button>
        </div>

        <div class="absolute top-[45%] -right-5 md:-right-8 lg:-right-14">
            <button class="cursor-pointer text-lg md:text-2xl lg:text-5xl text-white"
                    x-on:click="activeImage = activeImage === images.length ? 1 : activeImage + 1">
                <i class="fa-solid fa-circle-arrow-right"></i>
            </button>
        </div>
    </div>
</div>