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 propertywhite-space with nowrap
to prevent text wrapping and set the propertyoverflow-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.
<!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 >
|
@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 propertyoverflow-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.
<!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 >
|
@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: