Dublin, Ireland

All Content Copyright ©2019

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

JavaScript Slider

Here’s a throwback to my previous post, summarizing several vanilla JavaScript sliders.

This quick tutorial will show you how to create a basic slider in less than 100 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>


var slideArray = [];

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

var 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;';

    var elems = document.getElementsByClassName('caption');

    for (var i = 0; i < elems.length; i++) {
        elems[i].style.cssText = 'opacity: 0;';

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

var intervalID = setInterval(advanceSliderItem, 3000);


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

.slider .slide {
    display: none;

.caption {
    font-family: "Montserrat";
    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;
    -webkit-transition: all 0.8s ease-in-out;
         -o-transition: all 0.8s ease-in-out;
            transition: all 0.8s ease-in-out;

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

See a demo here.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

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

My Battle Tested Recommendations


Disclaimer: These recommendations contain affiliate links.