Infinite Image fadeIn fadeOut

view.blade.php

<div
    class="relative pointer-events-none"
    x-data="{ active: 0 }"
    x-init="setInterval(() =>
        active = ++active > $el.childElementCount - 1 ? 0 : active
    , 3000)"
>
    @foreach([
        'hero-pic1.webp',
        'hero-pic2.webp',
        'hero-pic3.webp',
        'hero-pic4.webp',
    ] as $index => $image)
        <div
            class="absolute h-full w-full bg-cover"
            style="background-image: url({{ Vite::asset("resources/img/{$image}") }})"
            x-show="active === {{ $index }}"
            x-transition.opacity.duration.500ms
        ></div>
    @endforeach
</div>