User:ARandomCitizen/fandomdesktop.js

if($('.hslider')[0]){ var multiItemhslider = (function {      return function (selector, config) {        var          _mainElement = document.querySelector(selector), // основный элемент блока          _hsliderWrapper = _mainElement.querySelector('.hslider__wrapper'), // обертка для .hslider-item          _hsliderItems = _mainElement.querySelectorAll('.hslider__item'), // элементы (.hslider-item)          _hsliderControls = _mainElement.querySelectorAll('.hslider__control'), // элементы управления          _hsliderControlLeft = _mainElement.querySelector('.hslider__control_left'), // кнопка "LEFT"          _hsliderControlRight = _mainElement.querySelector('.hslider__control_right'), // кнопка "RIGHT"          _wrapperWidth = parseFloat(getComputedStyle(_hsliderWrapper).width), // ширина обёртки          _itemWidth = parseFloat(getComputedStyle(_hsliderItems[0]).width), // ширина одного элемента              _positionLeftItem = 0, // позиция левого активного элемента _transform = 0, // значение транфсофрмации .hslider_wrapper _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации) _items = [], // массив элементов _interval = 0, _config = { isCycling: false, // автоматическая смена слайдов direction: 'right', // направление смены слайдов interval: 5000, // интервал между автоматической сменой слайдов pause: true // устанавливать ли паузу при поднесении курсора к слайдеру };

for (var key in config) { if (key in _config) { _config[key] = config[key]; }       }

// наполнение массива _items _hsliderItems.forEach(function (item, index) {         _items.push({ item: item, position: index, transform: 0 });        });

var position = { getItemMin: function { var indexItem = 0; _items.forEach(function (item, index) {             if (item.position < _items[indexItem].position) {                indexItem = index;              }            }); return indexItem; },         getItemMax: function  { var indexItem = 0; _items.forEach(function (item, index) {             if (item.position > _items[indexItem].position) {                indexItem = index;              }            }); return indexItem; },         getMin: function  { return _items[position.getItemMin].position; },         getMax: function  { return _items[position.getItemMax].position; }       }

var _transformItem = function (direction) { var nextItem; if (direction === 'right') { _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax) { nextItem = position.getItemMin; _items[nextItem].position = position.getMax + 1; _items[nextItem].transform += _items.length * 100; _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)'; }           _transform -= _step; }         if (direction === 'left') { _positionLeftItem--; if (_positionLeftItem < position.getMin) { nextItem = position.getItemMax; _items[nextItem].position = position.getMin - 1; _items[nextItem].transform -= _items.length * 100; _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)'; }           _transform += _step; }         _hsliderWrapper.style.transform = 'translateX(' + _transform + '%)'; }

var _cycle = function (direction) { if (!_config.isCycling) { return; }         _interval = setInterval(function  {            _transformItem(direction);          }, _config.interval); }

// обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { var direction = this.classList.contains('hslider__control_right') ? 'right' : 'left'; e.preventDefault; _transformItem(direction); clearInterval(_interval); _cycle(_config.direction); };

var _setUpListeners = function { // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click _hsliderControls.forEach(function (item) {           item.addEventListener('click', _controlClick);          }); if (_config.pause && _config.isCycling) { _mainElement.addEventListener('mouseenter', function {              clearInterval(_interval);            }); _mainElement.addEventListener('mouseleave', function {              clearInterval(_interval);              _cycle(_config.direction);            }); }       }

// инициализация _setUpListeners; _cycle(_config.direction);

return { right: function { // метод right _transformItem('right'); },         left: function  { // метод left _transformItem('left'); },         stop: function  { // метод stop _config.isCycling = false; clearInterval(_interval); },         cycle: function  { // метод cycle _config.isCycling = true; clearInterval(_interval); _cycle; }       }

}   });

var hslider = multiItemhslider('.hslider', {     isCycling: true    }) }