How TO – Horizontal Scrollable Image Gallery
Image Gallery With Horizontal Scroll
Use the horizontal scrollbar to see the other images:
Example
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
div.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
</style>
</head>
<body>
<h2>Image Gallery With Horizontal Scroll</h2>
<p>Use the horizontal scrollbar to see the other images.</p>
<div>
<img src=”img_5terre.jpg” alt=”Cinque Terre” width=”600″ height=”400″>
<img src=”img_forest.jpg” alt=”Forest” width=”600″ height=”400″>
<img src=”img_lights.jpg” alt=”Northern Lights” width=”600″ height=”400″>
<img src=”img_mountains.jpg” alt=”Mountains” width=”600″ height=”400″>
</div>
<p>Note that the images are of same size.</p>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
div.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
</style>
</head>
<body>
<h2>Image Gallery With Horizontal Scroll</h2>
<p>Use the horizontal scrollbar to see the other images.</p>
<div>
<img src=”img_5terre.jpg” alt=”Cinque Terre” width=”600″ height=”400″>
<img src=”img_forest.jpg” alt=”Forest” width=”600″ height=”400″>
<img src=”img_lights.jpg” alt=”Northern Lights” width=”600″ height=”400″>
<img src=”img_mountains.jpg” alt=”Mountains” width=”600″ height=”400″>
</div>
<p>Note that the images are of same size.</p>
</body>
</html>