How to Build a Vanilla JavaScript Slider in Less Than 100 Lines

đź‘‹ Ciprian on Tuesday, October 16, 2018 in Blog, JavaScript
Last modified on Sunday, July 26, 2020

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Vanilla JavaScript Slider

Updated to add ES6 compatibility and support for all modern browsers.

Carousels, sliders, slideshows — whatever you want to call them —  they’re all over the web. Based on the premise of limited space with multiple messages to deliver, carousels are used to showcase services, help sell products, and capture the attention of new visitors.

In this article, we take a look at several approaches of JavaScript sliders and inage carousels.

Tiniest JavaScript Slider

This quick tutorial will show you how to create a basic slider in less than 100 lines. The actual JavaScript is less than 30 lines 😊

<div class="slider">
    <div class="slide" data-background=""></div>
    <p class="caption caption-0">
        The first slide.
        <br><small>This is an awesome forest.</small>

    <div class="slide" data-background=""></div>
    <p class="caption caption-1">
        The second slide, yay!
        <br><small>This is a marvellous forest.</small>

    <div class="slide" data-background=""></div>
    <p class="caption caption-2">
        Oh look, a third slide!
        <br><small>This is a bloody brilliant forest. It's CGI.</small>


const slideArray = [];
for (let i = 0; i < document.querySelectorAll('.slider div').length; i++) {
    slideArray.push(document.querySelectorAll('.slider div')[i].dataset.background);

let currentSlideIndex = -1;

function advanceSliderItem() {

    if (currentSlideIndex >= slideArray.length) {
        currentSlideIndex = 0;

    document.querySelector('.slider').style.cssText = 'background: url("' + slideArray[currentSlideIndex] + '") no-repeat center center; background-size: cover;';

    const elems = document.getElementsByClassName('caption');
    for (let i = 0; i < elems.length; i++) {
        elems[i].style.cssText = 'opacity: 0;';

    const currentCaption = document.querySelector('.caption-' + (currentSlideIndex)); = 'opacity: 1;';

    let intervalID = setInterval(advanceSliderItem, 3000);


.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
    margin: 48px auto;
    background-size: cover;
    border-radius: 3px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    transition: background-image 0.8s ease-in-out;

.slider .slide {
    display: none;

.caption {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    display: inline-block;
    padding: 48px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    transition: all 0.8s ease-in-out;

.caption small {
    font-size: 16px;
    font-weight: 400;

See a demo here.

More Approachable Vanilla JS Sliders

The past weeks had me hunting for the fastest JavaScript sliders out there for a secret project and I have documented my findings and my experiments below.

Tiny Slider 2 – Vanilla JavaScript Slider (with swipe support)

Tiny Slider 2 is a great slider replacement for any jQuery-powered slider out there. Small, fast and feature-packed. Tiny Slider is inspired by Owl Carousel.

Supernova Slider – Vanilla JavaScript Swipe Slider (with swipe support)

A small slider for fast pages, with no bells and whistles, but with mobile support.

Supernova Slider – Vanilla JavaScript Slider (no swipe support)

A small slider for fast pages on modern browsers, with no bells and whistles, Flexbox CSS and full ES6 compatibility.

Supernova Slider – Sticks & Stones (no swipe support)

The smallest Vanilla JavaScript (ES6) slider, suitable for landing pages, with no bells and whistles.

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Buy me a coffee to support my work!

đź‘‹ Added by Ciprian on Tuesday, October 16, 2018 in Blog, JavaScript. Last modified on Sunday, July 26, 2020.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy