Hoe te maken: Horizontaal scrollbare afbeeldingsgalerij

Leer hoe je een afbeeldingsgalerij met horizontale scrollbalk maakt met CSS.

Maak een afbeeldingsgalerij met horizontale scrollbalk

Stap 1 - Voeg HTML toe:

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Woud">
  <img src="img_lights.jpg" alt="Noordelijke lichten">
  <img src="img_mountains.jpg" alt="Mountains">
</div>

Stap 2 - Voeg CSS toe:

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

Probeer het zelf

Gerelateerde pagina's

Handleiding:HTML afbeelding

Handleiding:CSS instellen van afbeeldingsstijlen