[j0hnik]

Бейбл пишет

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function fadeSlider(selector, userOptions) {
    var _this = this;

    this.options = {
        delay: 6000,
        duration: '1.1s',
        btnStopText: 'stop',
        btnResumeText: 'resume',
        autorun: true
    };
    _extends(this.options, userOptions);
    this.state = 'waiting';
    this.images = [];
    this.onstop = function () {};
    this.onstart = function () {};
    this.onchange = function () {};
    var self = this;

    this.initSlider = function () {
        _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 = function () {
        var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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 = function () {
        var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

        if (e) e.preventDefault();
        _this.slider.classList.remove('active');
        clearInterval(_this.timer);
        _this.state = 'paused';
        _this.onstop();
    };
    this.tick = function () {
        var img = _this.images[_this.current++];
        if (!img) {
            _this.images.forEach(function (i) {
                return 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});