Slider (full) JS by Orblazer

slider.css

.slider {
    position: relative;
}

/**
 * Slides
 */
.slider > .slides {
    height: 620px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slider > .slides > .slides--item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    opacity: 0;
    background-size: cover;
    background-position: center;

    -webkit-transition: opacity .7s;
    -moz-transition: opacity .7s;
    -o-transition: opacity .7s;
    transition: opacity .7s;
}

.slider > .slides > .slides--item.active {
    z-index: 0;
    opacity: 1;
}

.slider > .slides > .slides--item > .legend {
    position: absolute;
    right: 0;
    bottom: 160px;
    min-width: 170px;
    padding: 10px;
    background-color: #2b2b2b;
    color: white;
}

/**
 * Controls
 */
.slider > .controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 115px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.slider > .controls > .controls--item {
    background-color: white;
    border-radius: 50%;
    border: 1px solid #4b4b4b;
    height: 15px;
    width: 15px;
    cursor: pointer;
}

.slider > .controls > .controls--item.active {
    background-color: #95a722;
}

.slider > .controls > .controls--item:not(:last-child) {
    margin-right: 8px;
}

slider.html

<section class="slider">
    <ul class="slides">
        <li class="slides--item" style="background-image:url()">
            <div class="legend"></div>
        </li>
    </ul>

    <ul class="controls">
        <li class="controls--item"></li>
    </ul>
</section>

slider.js

function Slider(sliderId) {
    var self = this;
    var slider = document.getElementById(sliderId);
    var slidesList = slider.getElementsByClassName('slides')[0];
    var slides = slidesList.children;

    var controlsList = slider.getElementsByClassName('controls')[0];
    var controls = controlsList.children;
    var selectedControl = controlsList.getElementsByClassName('active')[0];

    var index = 0;
    if (selectedControl !== undefined) {
        index = findChildIndex(controls, selectedControl);
    }

    var timerSlider = new Timer(function () {
        if (index < (slides.length - 1)) {
            self.sliderChange(index + 1);
        } else {
            self.sliderChange(0);
        }

        self.restartTimer();
    }, slider.dataset.interval);

    // Change the slider
    this.sliderChange = function (newIndex) {
        if (newIndex !== index) {
            var selectedSlide = slidesList.getElementsByClassName('active')[0];
            selectedControl = controlsList.getElementsByClassName('active')[0];

            // remove active class
            if (selectedSlide !== undefined) {
                selectedSlide.className = selectedSlide.className.replace(' active', '');
            }
            if (selectedControl !== undefined) {
                selectedControl.className = selectedControl.className.replace(' active', '');
            }

            // update index
            index = newIndex;

            // add active class
            slides[index].className += ' active';
            controls[index].className += ' active';
        }
    };

    this.controlChangeEvent = function () {
        self.sliderChange(findChildIndex(controls, this));
        self.restartTimer();
    };

    // Add event to controls
    for (var i = 0; i < controls.length; i++) {
        controls[i].addEventListener('click', this.controlChangeEvent);
    }


    this.restartTimer = function () {
        timerSlider.restart();
    };
}

// Utils
function findChildIndex(childs, elem) {
    return Array.prototype.indexOf.call(childs, elem);
}

function Timer(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function () {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    this.stop = function () {
        window.clearTimeout(timerId);
        remaining = delay;
    };

    this.resume = function () {
        start = new Date();
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
    };

    this.start = this.resume;

    this.restart = function () {
        this.stop();
        this.start();
    };

    this.start();
}