En tus estilos CSS, por defecto, vas a ocultar todos los elementos del slider; Con la propiedad display
puedes lograrlo, pero no es la mejor opción si deseas aplicar animaciones, se usa > div
en el selector para seleccionar solo los hijos directos:
/* Ocultar todos los elementos */.slider-items > div { display:none;}/* Mostrar solo el que tenga la clase active */.slider-items > div.active { display:block;}
Al generar los elementos en el ciclo, asegúrate de asignar la clase active
solo al primer elemento:
<div class="slider-items"> @foreach($post->images as $image)<div class="inset-0 flex items-center justify-between md:w-96 h-full mx-auto {{ $loop->first ? 'active' : '' }}"><img src="{{ $image->name }}" alt="gallery" class="h-full"></div> @endforeach</div>
La parte importante es {{ $loop->first ? 'active' : '' }}
donde solo se asigna la clase al primer elemento y el resto queda con cadena vacía.
Con estos pequeños cambios tu slider va a funcionar correctamente.