How TO - Horizontal Scrollable Image Gallery
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:
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.
