Quantcast
Channel: Image slider dinámico en Laravel, esconder las demás imágenes - Stack Overflow en español
Viewing all articles
Browse latest Browse all 2

Respuesta de Triby en Image slider dinámico en Laravel, esconder las demás imágenes

$
0
0

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.


Viewing all articles
Browse latest Browse all 2

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>