DEV Community

Cover image for A JavaScript Slider in 8 Lines
Ciprian Popescu
Ciprian Popescu

Posted on

5 2

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.

Building a slider or a text rotator shouldn't use an insane amount of JavaScript and it should leverage modern CSS as much as possible.

The trick in this tutorial is matching CSS animation timing with the JavaScript setInterval() value.

This is what we’ll build:

Image description

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

<div id="slider--text"></div>
Enter fullscreen mode Exit fullscreen mode

We will populate this element later using JavaScript.

Styling is optional, but, for the sake of this tutorial, I styled the slider to center align the content, both vertically and horizontally. I have also used a basic animation where I added opacity and a transform property.

.fade-in {
    animation: fade 4s infinite;
}
Enter fullscreen mode Exit fullscreen mode

Note how my 4 second animation will match the 4000 milliseconds in the code below.

Next, we add the JavaScript "sliding" functionality by checking if the element exist, 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.

The gist of the JavaScript code is below:

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

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

setInterval(slider, 4000); // Slide every 4 seconds
Enter fullscreen mode Exit fullscreen mode

Check out the JavaScript code for a full breakdown and a slider demo.

Image of Bright Data

Maintain Seamless Data Collection – No more rotating IPs or server bans.

Avoid detection with our dynamic IP solutions. Perfect for continuous data scraping without interruptions.

Avoid Detection

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay