How to create a minimal JavaScript slider with CSS transitions

A JavaScript Slider in 8 Lines

In this post, we’ll build a minimal JavaScript slider, with no dependencies. The smallest, actually, without the actual slides’ HTML content: 8 lines of JavaScript.

This is what we’ll build:

CodePen Demo

See the Pen Minimal JS Slider by Ciprian (@ciprian) on CodePen.

Let’s start with the HTML code, which, in this case, is one <div> element:

<div id="slider--text"></div>

We will populate this element later using JavaScript.

Styling is optional, but, for the sake of this tutorial, here is some basic styling to center align the content, both vertically and horizontally:

#slider--text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

Again, for the sake of this tutorial, here is the transition CSS I used in the demo:

.fade-in {
    animation: fade 4s infinite;
}

@keyframes fade {
    0% {
        opacity: 0;
        transform: rotate3d(2, 2, 0, 48deg);
    }
    20% {
        opacity: 1;
        transform: rotate3d(0, 0, 0, 24deg);
    }
    80% {
        opacity: 1;
        transform: rotate3d(0, 0, 0, 24deg);
    }
    100% {
        opacity: 0;
        transform: rotate3d(-2, -2, 0, 48deg);
    }
}

I used a 4-second transition time, and I used an opacity change and an optional 3D rotation. Note that I have added a perspective: 1000px to the parent element of #slider--text.

Next, here is the JavaScript code, in all its glory:

if (document.getElementById("slider--text")) {
    let slides = [
        "<h2>My awesome title here<small>This is a slide</small></h2>",
        "<h2>Another awesome title here<small>This is another slide</small></h2>",
        "<h2>Yet another awesome title<small>This is yet another slide</small></h2>"
    ];

    let i = 0;

    const slider = () => {
        document.getElementById("slider--text").innerHTML = slides[i];
        document.getElementById("slider--text").classList.add('fade-in');

        (i < slides.length - 1) ? i++ : i = 0;
    };

    slider(); // Start slider immediately
    setInterval(slider, 4000); // Slide every 4 seconds
}

Let’s break down this code.

We start by checking if the element exists, and, if it does, we create an array of strings to slide. Note that you can use HTML.

Next, we create the slider by looping through the slides, and replacing the HTML inside the #slider--text element with the slide content. That is all!

Next, we call the slider so that it runs immediately, and then we call it every 4 seconds using a setInterval() function.

Additional Styling

If you want a sliding behaviour, you can change the CSS animation and add a left to right (or top to bottom) translate property.

Notes

If you want to change the duration of the slides, make sure you change both the number of seconds in the CSS code — 4s — and the number of milliseconds in the JavaScript setInterval() function — 4000. So, for 8 seconds, you would have 8s in CSS and 8000 in JavaScript.

Related posts