DEV Community

Cover image for Create a Carousel with CSS
Ismael López
Ismael López

Posted on • Edited on

2

Create a Carousel with CSS

El usuario necesita navegar por un set de items y posiblemente seleccionar alguno de ellos para facilitar la interacción creamos este elemento llamado carousel/slideshow.

Cuando usarlo

  • Utilízalo cuando tengas que mostrar una larga lista de elementos, pero quieres concentrar la atención del usuario solo en el elemento que seleccione por poco tiempo.
  • Utilízalo cuando quieras hacerle saber al usuario que hay más elementos delante que quieres mostrarle.
  • Utilizalo cuando no tengas suficiente espacio para mostrar todos los elementos a la vez.
  • utilízalo cuando tengas elementos muy visuales para mostrar, cómo carteles de películas, portadas de álbumes, productos, etc.
  • No lo utilices cuando los elementos no sean visuales como links a artículos de texto, documentos PDF etc.
  • No lo utilices cuando el contenido vinculado no es inmediatamente identificado por una imagen.

Aquí te dejo el resultado de un sencillo ejemplo con solo html y css, que como puedes ver se pueden obtener buenos resultados.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay