Как исправить функцию JS на перелистывание в галерее?
Всем привет.
Есть галерея для мобильной версии и для большой версии экранов (макс. 768 пикс. для мобилки, 769 и далее - большая версия):
https://codepen.io/blackerandrew/pen/vYXOaLr
Реализовано две функции, которые отвечают за перелистывание, собственно, для мобильной галереи и большой галереи. Суть проблемы: когда загружаешь страницу с определённой ориентацией, всё работает, но когда меняешь ориентацию, галерея перестаёт работать. Если горизонтально подвигать в codepen рабочую площадь с html/css/js, это можно увидеть. Ну или окно браузера. Вопрос, как этого избежать? Изначально скрипт был один и классы для галереи были одними. После решил их разъединить, однако всё равно не заработало. Прошу помощи.
'use strict';
var multiItemSlider = (function () {
return function (selector, config) {
var
_mainElement = document.querySelector(selector), // основный элемент блока
_sliderWrapper = _mainElement.querySelector('.tablet_slider__wrapper'), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll('.tablet_slider__item'), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll('.tablet_slider__control'), // элементы управления
_sliderControlLeft = _mainElement.querySelector('.tablet_slider__control_left'), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector('.tablet_slider__control_right'), // кнопка "RIGHT"
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
_items = []; // массив элементов
// наполнение массива _items
_sliderItems.forEach(function (item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
var position = {
getMin: 0,
getMax: _items.length - 1,
}
var _transformItem = function (direction) {
if (direction === 'right') {
if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
return;
}
if (!_sliderControlLeft.classList.contains('tablet_slider__control_show')) {
_sliderControlLeft.classList.add('tablet_slider__control_show');
}
if (_sliderControlRight.classList.contains('tablet_slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
_sliderControlRight.classList.remove('tablet_slider__control_show');
}
_positionLeftItem++;
_transform -= _step;
}
if (direction === 'left') {
if (_positionLeftItem <= position.getMin) {
return;
}
if (!_sliderControlRight.classList.contains('tablet_slider__control_show')) {
_sliderControlRight.classList.add('tablet_slider__control_show');
}
if (_sliderControlLeft.classList.contains('tablet_slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
_sliderControlLeft.classList.remove('tablet_slider__control_show');
}
_positionLeftItem--;
_transform += _step;
}
_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}
// обработчик события click для кнопок "назад" и "вперед"
var _controlClick = function (e) {
if (e.target.classList.contains('tablet_slider__control')) {
e.preventDefault();
var direction = e.target.classList.contains('tablet_slider__control_right') ? 'right' : 'left';
_transformItem(direction);
}
};
var _setUpListeners = function () {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_sliderControls.forEach(function (item) {
item.addEventListener('click', _controlClick);
});
}
// инициализация
_setUpListeners();
return {
right: function () { // метод right
_transformItem('right');
},
left: function () { // метод left
_transformItem('left');
}
}
}
}());
var slider = multiItemSlider('.tablet_slider')
}