/* Todos los slides apilados */
.slide {
position: absolute; inset: 0;
opacity: 0; /* oculto por defecto */
transition: opacity 0.7s ease-in-out;
}
/* El slide activo */
.slide.active {
opacity: 1; /* visible */
z-index: 1;
}
¿Cómo funciona? Todos los slides están apilados en el mismo espacio usando
position: absolute; inset: 0. Por defecto tienen opacity: 0 (invisibles). Al añadir la clase .active, el slide pasa a opacity: 1 y la transition CSS crea el fundido suave. El resto permanece invisible debajo. El autoplay avanza los slides automáticamente cada 3 segundos.