Alpinejs Carousel

carousel.blade.php

<div wire:key="carousel-{{ json_encode($images) }}">
    <div x-data="{
        images: @js($images),
        current: 0,
        isLoading: true,
        startX: 0,
        endX: 0,
        prev() {
            this.current = this.current === 0 ? this.images.length - 1 : this.current - 1;
        },
        next() {
            this.current = this.current === this.images.length - 1 ? 0 : this.current + 1;
        },
        touchStart(e) {
            this.startX = e.touches[0].clientX;
        },
        touchMove(e) {
            this.endX = e.touches[0].clientX;
        },
        touchEnd() {
            if (this.startX - this.endX > 50) {
                this.next();
            } else if (this.startX - this.endX < -50) {
                this.prev();
            }
        },
        handleImageLoad() {
            this.isLoading = false;
        },
        handleError(el) {
            el.src = '{{ asset('img/image-not-available.png') }}';
        }
    }">
        <div class="relative overflow-x-hidden rounded-lg max-h-[560px]" style="padding-top: 62.5%">
            <!-- Loading Spinner -->
            <div class="absolute inset-0 flex items-center justify-center" x-show="isLoading">
                <div
                    class="w-16 h-16 border-t-4 border-r-4 border-gray-300 border-solid rounded-full animate-spin"></div>
            </div>

            <div class="absolute inset-0 flex transition-transform duration-700 ease"
                 :style="`transform: translateX(${current * -100}%)`"
                 @touchstart="touchStart($event)"
                 @touchmove="touchMove($event)"
                 @touchend="touchEnd">
                <template x-for="(image, index) in images" :key="index">
                    <img class="flex-shrink-0 w-full h-full object-center object-cover"
                         :src="images[index]"
                         :loading="index === current || index === current + 1 ? 'eager' : 'lazy'"
                         @load="handleImageLoad"
                         x-on:error="handleError($el)"
                         alt="Property Image">
                </template>
            </div>

            <div class="absolute top-0 left-0 bottom-0 flex items-center" x-show="images.length > 1">
                <button
                    type="button"
                    class="py-2 px-2 text-4xl opacity-50 bg-gray-200 rounded-r-lg hover:opacity-100 focus:outline-none focus:ring-1"
                    @click="prev()">‹
                </button>
            </div>

            <div class="absolute top-0 right-0 bottom-0 flex items-center" x-show="images.length > 1">
                <button
                    type="button"
                    class="py-2 px-2 text-4xl opacity-50 bg-gray-200 rounded-l-lg hover:opacity-100 focus:outline-none focus:ring-1"
                    @click="next()">›
                </button>
            </div>
        </div>
    </div>
</div>