How to Create a HTML Slider / Carousal

A slider or carousal is one of the common elements found in a webpage. Mostly external plugins are used to create a slider, but coding a slider from scratch is not complicated. It will save you from including external plugins into your web application.

In this tutorial we will show how to create a slider with HTML, CSS & Javascript. This tutorial shows an example slider containing 4 slides, however you can use the same concepts to create any number of slides.

Demo

Download codes for the demo

HTML Structure

<div id="slider-outer">
    <div id="slider-inner" data-current-slide="1">
        <div class="slide">
            <img src="img/slide-1.jpg" />
        </div><!--
     --><div class="slide">
            <img src="img/slide-2.jpg" />
        </div><!--
     --><div class="slide">
            <img src="img/slide-3.jpg" />
        </div><!--
     --><div class="slide">
            <img src="img/slide-4.jpg" />
        </div>
    </div>
    <button id="slider-prev-button">Prev</button>
    <button id="slider-next-button">Next</button>
</div>

.slide holds each of the 4 slides
#slider-inner holds all the slides (placed side-by-side). Its attribute data-current-slide holds the slide number that is currently shown to the user.
#slider-outer is an extra container that holds #slider-inner. There is a reason for including this extra container.
#slider-prev-button goes to the previous slide
#slider-next-button goes to the next slide

CSS Required

#slider-outer {
    overflow: hidden;
    width: 600px;
    position: relative;
}

#slider-inner {
    width: 400%;
    transition: transform 0.5s;
}

.slide {
    display: inline-block;
    vertical-align: middle;
    width: 25%;
}

.slide img {
    display: inline-block;
    vertical-align: middle;
}

#slider-prev-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

#slider-next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

#slider-outer has a given width. It can be hardcoded or may use percentage values depending on the case. Also just 1 slide needs to be shown to the user, rest are to be hidden.
```
#slider-outer {
    width: 600px;
    overflow: hidden;
}
```
Each slide should obviously occupy the full width. Since #slider-inner is holding all the 4 slides side-by-side, its width should become 400% times the width of #slider-outer in order to accomodate all 4 slides.
```
#slider-inner {
    width: 400%;
}
```
Since there are 4 slides, width of each slide should be 25% of the parent container. All 4 slides lie side-by-side.
```
.slide {
    width: 25%;
    display: inline-block;
    vertical-align: middle;
}
```
Movement of slides should appear as an animation. We plan to change slides by changing translation position of #slider-inner with Javascript.
```
#slider-inner {
    transition: transform 0.5s;
}
```
#slider-outer has a relative position so as to accomodate the "Previous" & "Next" buttons which are absolutely positioned.
The "Previous" & "Next" buttons are vertically centered by using the popular trick of setting top: 50%; and transform: translateY(-50%);

Using Javascript to Change Slides

The "Previous" & "Next" buttons have click event handlers. On a click we check the current slide and then do a CSS translation of #slider-inner to the previous or next slide.

document.querySelector("#slider-prev-button").addEventListener('click', function() {
    // current slide number as integer
    var current_slide = parseInt(document.querySelector("#slider-inner").getAttribute('data-current-slide'), 10);

    // cannot go before the first slide
    if(current_slide == 1)
        return
    else
        moveSlider(current_slide-1);
});

document.querySelector("#slider-next-button").addEventListener('click', function() {
    // current slide number as integer
    var current_slide = parseInt(document.querySelector("#slider-inner").getAttribute('data-current-slide'), 10);

    // cannot go after the last slide
    if(current_slide == 4)
        return
    else
        moveSlider(current_slide+1);
});

// move the slider
function moveSlider(slide) {
    // percentage to move
    var percentage_move = (100/4)*(slide-1);
    
    // CSS translation
    document.querySelector("#slider-inner").style.transform = 'translateX(-' + percentage_move + '%)';

    // set the current slide
    document.querySelector("#slider-inner").setAttribute('data-current-slide', slide);
}

Making the Slider Responsive

We had hardcoded the width of #slider-outer which is creating a fixed width slider. We can use CSS media queries to change its width, and making the slider responsive.

@media screen and (min-width:300px) and (max-width:600px) { 
    #slider-outer {
        width: 100%;
    }
}

Note that width of #slider-inner and .slider were already fixed as percentages, so they are good as it is.