How to Create a Horizontal Scrollable Image Gallery with CSS and JavaScript
In this solution, we will create a horizontal scrollable image gallery that allows users to scroll through a series of images horizontally. The gallery will be styled using CSS, and JavaScript will be used for adding interactivity (like navigation buttons).
Step 1) Add HTML:
<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:
div.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
Complete Code:
<!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 class="scroll-container">
<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>