Cómo crear: Biblioteca de imágenes desplazable horizontalmente

Aprende a crear una biblioteca de imágenes con barra de desplazamiento horizontal usando CSS.

Crear una biblioteca de imágenes con barra de desplazamiento horizontal

Primer paso - Añadir HTML:

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Bosque">
  <img src="img_lights.jpg" alt="Luces del Norte">
  <img src="img_mountains.jpg" alt="Montañas">
</div>

Segundo paso - Añadir CSS:

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
div.scroll-container img {
  padding: 10px;
}

Prueba por ti mismo

Páginas relacionadas

Tutoriales:Imágenes HTML

Tutoriales:Establecer estilo de imagen CSS