[dupre]

Всеми правдами и неправдами, взопрел весь, но кое-как осилил код данного слайдера. Проверил, работает во всех браузерах, а в ie не работает Почему? Что нет так?

function fadeSlider(selector, userOptions) {
    this.options = {
        delay: 6000,
        duration: '1.1s',
        btnStopText: 'stop',
        btnResumeText: 'resume',
        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.getElementsByTagName('head')[0].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 = 0;
                img.style.left = 0;
            });
        }

        function addControls(options) {
            var stop = document.createElement('a');
            stop.textContent = options.btnStopText;
            stop.onclick = self.stop;
            stop.className = 'stop';

            var resume = document.createElement('a');
            resume.textContent = options.btnResumeText;
            resume.onclick = self.run;
            resume.className = 'resume';

            var controls = document.createElement('div');
            controls.className = 'controls';
            controls.appendChild(stop);
            controls.appendChild(resume);
            slider.appendChild(controls);
        }
        this.state = 'ready';
    };
    this.timer = null;
    this.run = (e = null) => {
        if (e) e.preventDefault()
        this.slider.classList.add('active');
        this.tick();
        var tick = this.tick;
        this.timer = setInterval(function() {
            tick();
        }, this.options.delay);
        this.state = 'running';
        this.onstart();
    };
    this.stop = (e = null) => {
        if (e) e.preventDefault()
        this.slider.classList.remove('active');
        clearInterval(this.timer);
        this.state = 'paused';
        this.onstop();
    };
    this.tick = () => {
        var img = this.images[this.current++];
        if (!img) {
            this.images.forEach(i => i.classList.remove('fade'));
            this.current = 1;
            img = this.images[0];
            img.clientWidth;
        }
        img.classList.add('fade');
        this.onchange();
    };

    // check if page loaded and init
    if (document.readyState === "complete" || document.readyState === "interactive") {
        this.initSlider();
    } else {
        document.addEventListener("DOMContentLoaded", function(event) {
            self.initSlider();
        });
    }
    return this;
}

var mySlider = new fadeSlider('.fadeslider');

  //var mySlider = new fadeSlider('.fadeslider', {delay: 3000});
  // var mySlider = new fadeSlider('.fadeslider', {autorun: false});