How TO - Horizontal Scrollable Image Gallery

❮ Previous Next ❯

Learn how to create an image gallery with a horizontal scrollbar with CSS.

Image Gallery With Horizontal Scroll

Use the horizontal scrollbar to see the other images:

Cinque Terre Forest Northern Lights Mountains Cinque Terre
Try it Yourself »

Create an Image Gallery with Horizontal Scroll

Step 1) Add HTML:

Example

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Forest">
  <img src="img_lights.jpg" alt="Northern Lights">
  <img src="img_mountains.jpg" alt="Mountains">
</div>
Step 2) Add CSS:

Example

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

div.scroll-container img {
  padding: 10px;
}
Try it Yourself »

Tip: Go to our HTML Images Tutorial to learn more about images.

Tip: Go to our CSS Style Images Tutorial to learn more about how to style images.


❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.