<p>The tiniest <a href="https://getbutterfly.com/how-to-build-a-vanilla-javascript-slider-in-less-than-100-lines/">Vanilla JavaScript Sliders</a>.</p>

<div class="homepage-hero-slider gallery">
    <div class="photos">
        <div class="slide block active" style="background: url(https://images.unsplash.com/photo-1532775946639-ebb276eb9a1c?ixlib=rb-0.3.5&s=b821fc70ae641c5af2bfa331ea90f17c&auto=format&fit=crop&w=1500&q=80) no-repeat center center; background-size: cover;"></div>
        <div class="slide block" style="background: url(https://images.unsplash.com/photo-1516571137133-1be29e37143a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=615f2f112cda6c65a2511e9952556680&auto=format&fit=crop&w=1506&q=80) no-repeat center center; background-size: cover;"></div>
        <div class="slide block" style="background: url(https://images.unsplash.com/photo-1516214104703-d870798883c5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4cd3d445041467403058c0d8356b1f9b&auto=format&fit=crop&w=1500&q=80) no-repeat center center; background-size: cover;"></div>
        <div class="slide block" style="background: url(https://images.unsplash.com/photo-1512089425728-b012186ab3cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0b9c18fd67a45fb33235d78ea2c1cdef&auto=format&fit=crop&w=1500&q=80) no-repeat center center; background-size: cover;"></div>
</div>
    <div class="buttons">
        <a class="prev" href="#"><i class="fas fa-fw fa-arrow-left"></i></a>
        <a class="next" href="#"><i class="fas fa-fw fa-arrow-right"></i></a>
    </div>
</div>

<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESDK2J7&placement=getbutterflycom" id="_carbonads_js"></script>
.gallery {
    width: 100%;
    height: 600px;
    position: relative;
}
.gallery .photos {
    position: relative;
    height: 100%;
}
.gallery .block {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
}
.gallery .buttons {
    position: absolute;
    width: 100%;
    top: 258px;
    font-size: 24px;
}
.gallery .buttons .prev {
    border-radius: 0 3px 3px 0;
    float: left;
}
.gallery .buttons .next {
    border-radius: 3px 0 0 3px;
    float: right;
}
.gallery .buttons a {
    z-index: 4;
    position: relative;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.25);
    text-decoration: none;
    display: inline-block;
    padding: 24px 16px;
}
.gallery .block.active {
    opacity: 1;
}
function supernova_slider() {
    let nextBtn = document.querySelector(".gallery .buttons .next"),
        prevBtn = document.querySelector(".gallery .buttons .prev"),
        slide = document.querySelectorAll(".gallery .photos .block"),
        i = 0;

    prevBtn.onclick = (event) => {
        event.preventDefault();

        slide[i].classList.remove("active");
        i--;

        if (i < 0) {
            i = slide.length - 1;
        }
        slide[i].classList.add("active");
    };

    nextBtn.onclick = (event) => {
        event.preventDefault();

        slide[i].classList.remove("active");
        i++;

        if (i >= slide.length) {
            i = 0;
        }

        slide[i].classList.add("active");
    };

    slider_callback();
    let sliderInterval = window.setInterval(slider_callback, 3000);

    function slider_callback() {
        nextBtn.click();
    }
}

supernova_slider();

External CSS

  1. https://getbutterfly.com/static/codepen-carbon.css

External JavaScript

  1. https://use.fontawesome.com/releases/v5.3.1/js/all.js