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...