How to create an image gallery with a horizontal scrollbar using CSS ?
Last Updated :
10 Jan, 2024
In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently utilizes the horizontal space for displaying a larger number of images.
Using White-space and Overflow-x
The `white-space` is used to control text wrapping and spacing within an element, while `overflow-x` manages horizontal content overflow, enabling options like hiding, scrollbar display, or container expansion.
Approach
- Create the basic structure of the web page with heading element, <div>, and <img>. Link the external stylesheet that defines styles for the body, headings, the main gallery container, and individual images.
- Use the Google Fonts and import the ‘Poppins’ font for the text. All the images have style with fixed width, height, and margins having rounded corners and a border.
- The gallery container element has the class name “
gallerybox"
has the property white-space with nowrap
to prevent text wrapping and set the property overflow-x to auto
for providing a horizontal scrollbar when needed.
- The property margin-right specifies the margin between the images.
Example: The example illustrates how to create an image gallery with a horizontal scrollbar using CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >
Image gallery with a horizontal
scrollbar using CSS
</ title >
< link rel = "stylesheet"
href = "index.css" >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >
Image gallery with a horizontal
scrollbar White-space and Overflow-x
CSS properties.
</ h3 >
< div class = "gallerybox" >
< div class = "imgbox" >
< img src =
alt = "Img1" >
< img src =
alt = "Img2" >
< img src =
alt = "Img3" >
< img src =
alt = "Img4" >
< img src =
alt = "Img5" >
< img src =
alt = "Img6" >
< img src =
alt = "Img7" >
< img src =
alt = "Img8" >
< img src =
alt = "Img9" >
< img src =
alt = "Img10" >
</ div >
</ div >
</ body >
</ html >
|
CSS
@import
body {
font-family : 'Poppins' , sans-serif ;
}
h 1 {
color : rgb ( 41 , 107 , 41 );
text-align : center ;
}
h 3 {
text-align : center ;
}
.gallerybox {
white-space : nowrap ;
overflow-x: auto ;
}
.imgbox img {
width : 400px ;
height : 200px ;
margin-right : 5px ;
border-radius: 20px ;
border : 2px solid rgb ( 138 , 138 , 128 );
}
|
Output
Using Flexbox properties and Overflow-x
Flexbox properties, such as ‘display: flex and ‘justify-content’, helps in arrangement of elements, while `overflow-x` manages horizontal content overflow, offering options like hiding, scrollbar display, or container expansion.
Approach
- Create the basic structure of the web page with heading element, <div>, and <img>. Link the external stylesheet that defines styles for the body, headings, the main gallery container, and individual images.
- Use the Google Fonts and import the ‘Poppins’ font for the text. All the images have style with fixed width, height, and margins having rounded corners and a border.
- The gallery container element has the class name “
gallerybox"
has the property overflow-x to auto
for providing a horizontal scrollbar when needed.
- The property margin-right specifies the margin between the images. The element having class imgbox have the property
display with flex
to prevent text wrapping and flex-wrap with no-wrap to avoid wrapping images on smaller screen sizes.
Example: The example illustrates how to create an image gallery with a horizontal scrollbar using CSS properties.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >
Image gallery with a horizontal
scrollbar using CSS
</ title >
< link rel = "stylesheet"
href = "index.css" >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >
Image gallery with a horizontal
scrollbar using CSS with Flexbox properties
</ h3 >
< div class = "gallerybox" >
< div class = "imgbox" >
< img src =
alt = "Img1" >
< img src =
alt = "Img2" >
< img src =
alt = "Img3" >
< img src =
alt = "Img4" >
< img src =
alt = "Img5" >
< img src =
alt = "Img6" >
< img src =
alt = "Img7" >
< img src =
alt = "Img8" >
< img src =
alt = "Img9" >
< img src =
alt = "Img10" >
</ div >
</ div >
</ body >
</ html >
|
CSS
@import url (
body {
font-family : 'Poppins' , sans-serif ;
}
h 1 {
color : rgb ( 41 , 107 , 41 );
text-align : center ;
}
h 3 {
text-align : center ;
}
.gallerybox {
overflow-x: auto ;
}
.imgbox img {
width : 400px ;
height : 200px ;
margin-right : 5px ;
border-radius: 20px ;
border : 2px solid rgb ( 138 , 138 , 128 );
}
.imgbox {
display : flex;
flex-wrap: nowrap ;
}
|
Output:
Share your thoughts in the comments
Please Login to comment...