getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2018
getButterfly

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.

HTML

<div class="slider">
    <div class="slide" data-background="https://evermotion.org/files/model_images/3e0dbe0ce65face2b9d44ab7f013762d499867ed.jpg"></div>
    <p class="caption caption-0">
        The first slide.
        <br><small>This is an awesome forest.</small>
    </p>

    <div class="slide" data-background="https://www.cbc.ca/natureofthings/content/images/episodes/talktalk_1920.jpg"></div>
    <p class="caption caption-1">
        The second slide, yay!
        <br><small>This is a marvellous forest.</small>
    </p>

    <div class="slide" data-background="https://cdn1.epicgames.com/ue/product/Screenshot/MAWIRedwoodForestPackV2Screenshot0001-1920x1080-e62973805ee13fbc3bca02a2ade9e9c4.jpg"></div>
    <p class="caption caption-2">
        Oh look, a third slide!
        <br><small>This is a bloody brilliant forest. It's CGI.</small>
    </p>
</div>

JavaScript

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() {
    currentSlideIndex++;

    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));
    currentCaption.style.cssText = 'opacity: 1;';
}

var intervalID = setInterval(advanceSliderItem, 3000);

CSS

.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

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.