simple fade-out slider

by Stalk

HTML

<div class="fadeslider">
  <img src="https://placeimg.com/640/480/arch" alt="">
  <img src="https://placeimg.com/640/480/animals" alt="">
  <img src="https://placeimg.com/640/480/nature" alt="">
  <img src="https://placeimg.com/640/480/people" alt="">
  <img src="https://placeimg.com/640/480/tech" alt="">
</div>

JavaScript

function fadeSlider(selector, userOptions){
  this.options = {
    delay: 4000,
    duration: '1.7s',
    btnStopText: 'stop',
    btnResumeText: 'start',
    autorun: true,
  };
  Object.assign(this.options, userOptions);
  this.state = 'waiting';
  this.images = [];
  this.onstop = function(){};
  this.onstart = function(){};
  this.onchange = function(){};
  var self = this;
  
  this.initSlider = () => {
    this.state = 'init';
    var slider = this.slider = document.querySelector(selector);
    slider.style.position = 'relative';
    this.images = Array.prototype.slice.call(
      slider.querySelectorAll('img')
    );
    cloneFirst(slider, this.images);
    injectStyles(this.options.duration);
    addControls(this.options);
    var count = this.images.length;
    this.options.total = this.images.length;
    setImgStyles(this.images, this.options);
    this.current = 0;
    if (this.options.autorun) this.run();
    
    function injectStyles(duration) {
      var style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = selector + ' img.fade { opacity: 0; ' +
        'transition: opacity ' + duration + ' ease; }' + 
        selector + ' .controls { color: #a3a3a3; font-size: 12px; }' +
        selector + ' .controls a {margin-top: 1px;  }' +
        selector + '.active .controls .resume { display: none; }' +
        selector + ' .controls .stop { display: none; }' +
        selector + '.active .controls .stop { display: inline; }';
      document.querySelector('head').appendChild(style);
    }
    function cloneFirst(slider, images) {
      var first = images[0];
      var clone = first.cloneNode();
      clone.style.zIndex = 0;
      clone.style.outline = 'dashed 1px orange;';
      slider.append(clone);
    }
    function setImgStyles(images, options) {
      var zIndex = count;
      images.forEach(function(img, i) {
        img.style.position = 'absolute';
        img.style.zIndex = zIndex--;
        img.style.top =...