getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2019
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.

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

Added by Ciprian on Tuesday, October 16, 2018 in Blog, JavaScript

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

Related Articles

My Battle Tested Recommendations
Disclaimer: These recommendations contain affiliate links.

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush
SEMrush

Privacy Policy