Incorporating a slider into your website or blog can significantly enhance the user experience while adding a touch of elegance and organization to your design.
In this post, I will guide you through the process of creating a slider using only HTML and CSS. While some lines of code may require more explanation, others are straightforward. Rest assured, I will strive to provide clear and simple explanations for each step, ensuring that you grasp the concept effortlessly.
Let's dive in and get started!
HTML part
<div class="slider-wrap">
<div class="slider-links">
<a href="#slide-1">1</a>
<a href="#slide-2">2</a>
<a href="#slide-3">3</a>
<a href="#slide-4">4</a>
<a href="#slide-5">5</a>
</div>
<div class="slider">
<div class="slide" id="slide-1">1</div>
<div class="slide" id="slide-2">2</div>
<div class="slide" id="slide-3">3</div>
<div class="slide" id="slide-4">4</div>
<div class="slide" id="slide-5">5</div>
</div>
</div>CSS part
* {
/* padding and border are
included in the width and height */
box-sizing: border-box;
}
/****** Links ******/
.slider-links {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.slider-links a {
background-color: darkgreen;
color: aliceblue;
text-decoration: none;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 2px;
}
/****** Slides ******/
.slider {
width: 100%;
height: 100%;
display: flex;
overflow-x: auto;
/* how strictly snap points are enforced
Isn't supported on Chrome
*/
scroll-snap-type: x mandatory;
/* Smoothly animate instead of a straight jump */
scroll-behavior: smooth;
}
.slide {
width: 100%;
min-height: 200px;
flex-shrink: 0;
height: 100%;
font-size: xxx-large;
font-weight: bolder;
color: red;
border: 1px solid green;
border-radius: 5px;
background: bisque;
display: flex;
justify-content: center; /* X axis */
align-items: center; /* Y axis */
margin-right: 20px;
}
/****** Navigation bar ******/
/* the scrollbar style */
.slider::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slider::-webkit-scrollbar-thumb {
display: none;
}
Explanation
- Assign an auto value to overflow-x property causing a scrolling mechanism to be provided for overflowing boxes.
- scroll-snap-type property sets how strictly snap points are enforced, scroll-snap-type isn’t supported on google chrome:
visit this page for more information.
- Instead of a straight jump, scroll-behavior: smooth add a smooth scrolling effect to the slider.
- The ::-webkit-scrollbar pseudo-element allows us to modify the look of the browser’s scrollbar.
visit this page for more information.