How to create horizontal scrollable sections using CSS ?
In this article, we will see how we can create a horizontal scrollable section using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style,
HTML Code: In this section, we will create a structure of our sections.
Steps:
- Create a div element with class content.
- Inside our content div create another four div with class section.
- Give four different ids to each div.
- In each div include a heading tag with the appropriate heading.
HTML
<!DOCTYPE html> < html lang = "en" > < body > <!-- Main container with class content --> < div class = "content" > <!-- Four sections for our code --> < div class = "section" id = "one" > <!-- Heading tag --> < h1 >Welcome To</ h1 > </ div > < div class = "section" id = "two" > < h1 >Geeks</ h1 > </ div > < div class = "section" id = "three" > < h1 >For</ h1 > </ div > < div class = "section" id = "four" > < h1 >Geeks</ h1 > </ div > </ div > </ body > </ html > |
CSS: We will use CSS to give our section some structure.
HTML
< style > /* Adding color to first section */ #one{ background-color: #E6358B; } /* Adding color to second section */ #two{ background-color: #22A2AF; } /* Adding color to third section */ #three{ background-color: #7CEC9F; } /* Adding color to fourth section */ #four{ background-color: #D8A928; } /* General styling to our main section */ .content{ width: 100vw; height: 80vh; display: flex; align-items: center; flex-wrap: nowrap; } /* Styling to each individual section */ .section{ width: 100%; height: 100%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #ffffff; } /* For hiding scroll bar */ ::-webkit-scrollbar{ display: none; } </ style > |
Complete Code:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < style > /* Adding color to first section */ #one { background-color: #E6358B; } /* Adding color to second section */ #two { background-color: #22A2AF; } /* Adding color to third section */ #three { background-color: #7CEC9F; } /* Adding color to fourth section */ #four { background-color: #D8A928; } /* General styling to our main section */ .content { width: 100vw; height: 80vh; display: flex; align-items: center; flex-wrap: nowrap; } /* Styling to each individual section */ .section { width: 100%; height: 100%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #ffffff; } /* For hiding scroll bar */ ::-webkit-scrollbar { display: none; } </ style > </ head > < body > <!-- Main container with class content --> < div class = "content" > <!-- Four sections for our code --> < div class = "section" id = "one" > <!-- Heading tag --> < h1 >Welcome To</ h1 > </ div > < div class = "section" id = "two" > < h1 >Geeks</ h1 > </ div > < div class = "section" id = "three" > < h1 >For</ h1 > </ div > < div class = "section" id = "four" > < h1 >Geeks</ h1 > </ div > </ div > </ body > </ html > |
Output:
Please Login to comment...