Помогите разобраться с кодом.
Нашел это пример слайдера карусели в интернете. Начал разбираться и впал в ступор.
Выводил данные в консоль, пробовал разбирать код по-строчно, но так и не понял какие процессы здесь выполняются. Помогите пожалуйста кто имеет много опыта. Напишите что и где происходит в коде, или лучше упростите код, так чтобы даже тупой мог понять типа меня. Что конкретно не могу понять это, что выполняют методы объекта position. Они как-то вызываются в функции _transformItem ... 'use strict'; var multiItemSlider = (function () { return function (selector, config) { var _mainElement = document.querySelector(selector), // основный элемент блока _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item) _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT" _sliderControlRight = _mainElement.querySelector('.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 = { 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; } _sliderWrapper.style.transform = 'translateX(' + _transform + '%)'; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains('slider__control')) { e.preventDefault(); var direction = e.target.classList.contains('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('.slider') <div class="slider"> <div class="slider__wrapper"> <div class="slider__item"> <div style="height: 250px; background: orange;">1</div> </div> <div class="slider__item"> <div style="height: 250px; background: green;">2</div> </div> <div class="slider__item"> <div style="height: 250px; background: violet;">3</div> </div> <div class="slider__item"> <div style="height: 250px; background: coral;">4</div> </div> </div> <a class="slider__control slider__control_left" href="#" role="button"></a> <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a> </div> Код:
body { |
Цитата:
крайний левый слайд перемещается в конец цепочки слайдов (движение влево) строка 68 и наоборот крайний правый слайд в начало цепочки слайдов при движении вправо строка 58, попутно сохраняется новое положение слайда в параметре position(строки 56, 66) |
Я сам знаю по коду что здесь происходит, но мне нужно больше деталей, например, каким образом добывается минимальный и максимальный элемент ...
|
Цитата:
в строку 72 добавьте console.log(_items.map(({position}) => position)); смотрите консоль, будет понятнее какой слайд на текущий момент максимальный и минимальный. можно также для наглядности увеличить время анимации слайда тогда будет видна вся скрытая механика перемещений. добавить вниз css .slider { overflow: visible; width: 70%; } .slider__item { transition: transform 1s ease; } |
Часовой пояс GMT +3, время: 08:33. |