Как исправить функцию 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')
}

Ответы (0 шт):