Como criar: Galeria de imagens rolável horizontalmente

Aprenda a usar CSS para criar uma galeria de imagens com barra de rolagem horizontal.

Crie uma galeria de imagens com barra de rolagem horizontal

Primeiro passo - Adicionar HTML:

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Floresta">
  <img src="img_lights.jpg" alt="Luas do Norte">
  <img src="img_mountains.jpg" alt="Montanhas">
</div>

Segundo passo - Adicionar CSS:

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

Experimente você mesmo

Páginas relacionadas

Tutorial:Imagem HTML

Tutorial:Definição de estilo de imagem CSS