Construir un carrusel interactivo dentro de un modal es una de las técnicas más vistosas que puedes lograr sin JavaScript, utilizando únicamente HTML y CSS. En esta parte final del proyecto se implementa un slider que permite visualizar diferentes personajes al hacer clic sobre cada tarjeta, combinando inputs de tipo radio, transformaciones 3D y transiciones suaves.
¿Cómo estructurar un slider con inputs de tipo radio en HTML?
El primer paso es preparar la estructura dentro del modal. Se crea un contenedor con la clase modal-content slider [0:25] y dentro de él se colocan tres inputs de tipo radio. Cada uno lleva un atributo name compartido (por ejemplo, slider1) para que funcionen como un grupo donde solo uno puede estar seleccionado a la vez, y un id único como radio1, radio2 y radio3 [0:52].
- El primer input lleva el atributo
checked por defecto.
- El atributo
name agrupa los radios para que se comporten como opciones excluyentes.
- Cada
id se vincula después con un label mediante el atributo for.
Después de los inputs se añade un contenedor con la clase cards, y dentro se colocan labels que envuelven el contenido visual de cada tarjeta. Cada label tiene un atributo for que apunta al id del input correspondiente [1:28], lo que permite que al hacer clic sobre la tarjeta se seleccione automáticamente ese radio.
¿Por qué es importante el atributo for en los labels?
Sin el atributo for correctamente enlazado al id del input, el clic sobre la tarjeta no activaría la selección. Esta relación entre label y input es lo que hace posible todo el mecanismo del slider sin necesidad de código JavaScript.
¿Qué propiedades CSS hacen posible el efecto 3D del carrusel?
Para lograr el efecto visual de tarjetas superpuestas con profundidad, se aplica la propiedad transform-style: preserve-3d al contenedor del slider [3:01]. Esta propiedad indica al navegador que los elementos hijos deben renderizarse en un espacio tridimensional en lugar de aplanarse.
css
.slider {
width: 300px;
height: 200px;
transform-style: preserve-3d;
}
Cada tarjeta individual (.card) recibe position: absolute para que se apilen en el mismo espacio, junto con propiedades de centrado usando left: 0, right: 0 y margin: 0 auto. Se agrega también una transición para que los cambios de posición sean suaves [4:12]:
css
.card {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transition: transform 0.4s ease-in-out;
cursor: pointer;
display: grid;
place-items: center;
}
Las propiedades display: grid y place-items: center permiten centrar el contenido interno de cada tarjeta de forma rápida y precisa.
¿Cómo funcionan los selectores con pseudo-clase checked?
Aquí está el corazón del mecanismo. Se utiliza el selector #radio1:checked combinado con el selector de hermano general (~) para aplicar estilos a la tarjeta correspondiente [6:35]. Cuando un radio está seleccionado, su tarjeta asociada se centra con translateX(0), scale(1), opacidad completa y un z-index alto.
css
#radio1:checked ~ .cards #card1 {
transform: translateX(0) scale(1);
opacity: 1;
z-index: 1;
}
Las tarjetas no seleccionadas se desplazan hacia los costados con translateX(40%) o translateX(-40%), reducen su tamaño con scale(0.8) y bajan su opacidad a 0.5 [7:48]. Esto genera el efecto visual de profundidad donde la tarjeta activa destaca sobre las demás.
¿Qué combinaciones de selectores se necesitan para tres tarjetas?
Con tres tarjetas se requieren nueve combinaciones en total: cada radio chequeado debe definir el estado de las tres tarjetas. Por ejemplo, cuando radio1 está activo, card1 se centra, card2 se mueve a la derecha y card3 a la izquierda [8:30].
El resultado final es un carrusel funcional donde cada clic selecciona un personaje diferente, con transiciones fluidas entre posiciones. Los últimos pasos pendientes incluyen ocultar los inputs radio visualmente (con visibility: hidden), agregar un botón inferior y colocar un ícono de cierre [9:55].
¿Lograste ocultar los radios y agregar el botón? Comparte tu solución en los comentarios.
