How to create an image gallery with a horizontal scrollbar using CSS ?
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.
Table of Content
- Using White-space and Overflow-x
- Using Flexbox properties and Overflow-x
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.
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 >w3wiki</ h1 > < h3 > Image gallery with a horizontal scrollbar White-space and Overflow-x CSS properties. </ h3 > < div class = "gallerybox" > < div class = "imgbox" > < img src = "https://media.w3wiki.net/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp" alt = "Img1" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210713211702/System-Design-Tutorial.png" alt = "Img2" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240104145854/1.gif" alt = "Img3" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240104145726/1.webp" alt = "Img4" > < img src = "https://media.w3wiki.net/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp" alt = "Img5" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240104150015/1.png" alt = "Img6" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240104150015/1.png" alt = "Img7" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240104150426/1.webp" alt = "Img8" > < img src = "https://media.w3wiki.net/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp" alt = "Img9" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240104150505/1.png" alt = "Img10" > </ div > </ div > </ body > </ html > |
CSS
@import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); 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.
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 >w3wiki</ h1 > < h3 > Image gallery with a horizontal scrollbar using CSS with Flexbox properties </ h3 > < div class = "gallerybox" > < div class = "imgbox" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155817/1.webp" alt = "Img1" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155842/1.png" alt = "Img2" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155909/1.gif" alt = "Img3" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155934/1.webp" alt = "Img4" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155817/1.webp" alt = "Img5" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155842/1.png" alt = "Img6" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155909/1.gif" alt = "Img7" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155934/1.webp" alt = "Img8" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155934/1.webp" alt = "Img9" > < img src = "https://media.w3wiki.net/wp-content/uploads/20240109155842/1.png" alt = "Img10" > </ div > </ div > </ body > </ html > |
CSS
@import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); 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:
Contact Us