Carrusel solo CSS | Programar Plus

Es sorprendente lo lejos que te llevarán HTML y CSS al crear un carrusel / presentación de diapositivas.

1. Colocar algunas cajas en una fila horizontal con flexbox es fácil.
2. Mostrando solo un cuadro a la vez con overflow y haciéndolo deslizable con -webkit-overflow-scrolling es fácil.
3. Puede hacer que las “diapositivas” se alineen bien con scroll-snap-type.
4. Una pareja de #jump-links es todo lo que necesita para hacer la navegación, que puede hacer todo agradable y fluido con scroll-behavior.

Ver la pluma
Control deslizante Real Simple de Chris Coyier (@chriscoyier)
en CodePen.

Christian Schaefer lo ha llevado un poco más allá con los botones siguiente y anterior, además de una función de reproducción automática que detiene la reproducción una vez que comienza la interacción.

Ver la pluma
Un control deslizante de carrusel solo CSS de Christian Schaefer (@Schepp)
en CodePen.

Acerca de la reproducción automática, es un truco CSS de buena fe:

1. Primero, desplazo lentamente los puntos de ajuste de desplazamiento hacia la derecha, haciendo que el área de desplazamiento siga debido a que se ajusta a ellos.
2. Después de haber desplazado el ancho de una diapositiva completa, desactivo el ajuste. El área de desplazamiento ahora está desatada de los puntos de ajuste de desplazamiento.
3. Ahora dejo que los puntos de ajuste de desplazamiento salten a sus posiciones iniciales sin que “arrastren” el área de desplazamiento con ellos.
4. Luego vuelvo a activar el ajuste, lo que ahora permite que el área de desplazamiento se ajuste a un punto de ajuste diferente 🤯

Frio.

Las presentaciones de diapositivas impulsadas por JavaScript (por ejemplo, con Flickty) también pueden ser realmente agradables. Hay algo genial en hacerlo con tan poco código.

Ver la pluma
Flickity – wrapAround por Dave DeSandro (@desandro)
en CodePen.