Image sliders are one of the most widely used UI components in modern web development. From product showcases and portfolio galleries to testimonials and hero banners, sliders allow multiple pieces of content to occupy the same space while keeping the interface clean and interactive. First of all, what is a slider? A slider is a UI component that displays one slide at a time, it allows navigation between slides, it moves content horizontally (most common) or vertically and lastly it uses animation for smooth transitions. A slider typically displays one item at a time and lets users navigate between items using arrows, dots, or swipe gestures.
The images are placed horizontally inside a fixed-width container but only one slide is visible because the container hides the overflow as shown below.
+----------------------------------+
| Viewport Window |
| [ Slide 1 ] |
+----------------------------------+
When we click "Next", we shift the entire row left, likewise when we click "Previous", we shift the entire right. By this way, we allow the next image that was hidden to be displayed while the previous goes hidden.
When we want to build an image slider, we start with the HTML document by creating the div container first with a class of slider, the left and right arrows are enclosed in a button element with a class of slider_btn slider_btn--left in the HTML. Then we create the img element with the images we want, and also with a class of slides as it is shown below.
<div class="slider">
<img src="../images/image-product-1.jpg" alt="Slide 1" class="slide">
<img src="../images/image-product-2.jpg" alt="Slide 2" class="slide">
<img src="../images/image-product-3.jpg" alt="Slide 3" class="slide">
<img src="../images/image-product-4.jpg" alt="Slide 4" class="slide">
<button class="slider__btn slider__btn--left">←</button>
<button class="slider__btn slider__btn--right">→</button>
</div>
The next step is the styling which is done in the css file section. The styling shown below is in 375px, it is shown in mobile view. It gives basic layout, the hiding and showing behavior for slides.
.slider{
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
.slides {
display: flex;
width: 100%;
height: auto;
}
.slider__btn--left {
left: 5px;
}
.slider__btn--right {
right: 5px;
}
.slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: white;
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
color: hsl(26, 100%, 55%);
font-weight: 700;
z-index: 10;
}
The last step is implementing the javascript logic. The logic is to make sure that when the button is clicked, it performs a function which is showing the correct slide in this context.
let currentMobileSlide = 0;
const mobileSlides = document.querySelectorAll('.slider .slide');
const mobileLeftBtn = document.querySelector('.slider__btn--left');
const mobileRightBtn = document.querySelector('.slider__btn--right');
unction showMobileSlide(index) {
if (!mobileSlides || mobileSlides.length === 0) return;
mobileSlides.forEach((slide, i) => {
slide.style.display = (i === index) ? 'block' : 'none';
slide.classList.toggle('active', i === index);
});
}
if (mobileLeftBtn) {
mobileLeftBtn.addEventListener('click', () => {
currentMobileSlide = (currentMobileSlide === 0) ? mobileSlides.length - 1 : currentMobileSlide - 1;
showMobileSlide(currentMobileSlide);
});
}
if (mobileRightBtn) {
mobileRightBtn.addEventListener('click', () => {
currentMobileSlide = (currentMobileSlide === mobileSlides.length - 1) ? 0 : currentMobileSlide + 1;
showMobileSlide(currentMobileSlide);
});
}
// Initialize mobile slider
showMobileSlide(currentMobileSlide);
In conclusion, slider is simple and lightweight, ideal for portfolios or landing pages. It can also be enhanced by adding autoplay, swipe gestures and/or transition effects.
Top comments (1)
Nice article