Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.08.2020, 16:59
Новичок на форуме
Отправить личное сообщение для Alexkor5 Посмотреть профиль Найти все сообщения от Alexkor5
 
Регистрация: 30.08.2020
Сообщений: 6

Помогите разобраться с кодом.
Нашел это пример слайдера карусели в интернете. Начал разбираться и впал в ступор.
Выводил данные в консоль, пробовал разбирать код по-строчно, но так и не понял какие процессы здесь выполняются.
Помогите пожалуйста кто имеет много опыта.
Напишите что и где происходит в коде, или лучше упростите код, так чтобы даже тупой мог понять типа меня.
Что конкретно не могу понять это, что выполняют методы объекта 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 {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: #fff;
      height: 3000px;
    }
 
    .slider {
      position: relative;
      overflow: hidden;
    }
 
    .slider__wrapper {
      display: flex;
      transition: transform 0.6s ease;
    }
 
    .slider__item {
      flex: 0 0 50%;
      max-width: 50%;
    }
 
    .slider__control {
      position: absolute;
      top: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      color: #fff;
      text-align: center;
      opacity: 0.5;
      height: 50px;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, .5);
    }
 
    .slider__control:hover,
    .slider__control:focus {
      color: #fff;
      text-decoration: none;
      outline: 0;
      opacity: .9;
    }
 
    .slider__control_left {
      left: 0;
    }
 
    .slider__control_right {
      right: 0;
    }
 
    .slider__control::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
    }
 
    .slider__control_left::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }
 
    .slider__control_right::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }
 
    .slider__item>div {
      line-height: 250px;
      font-size: 100px;
      text-align: center;
    }
Ответить с цитированием
  #2 (permalink)  
Старый 30.08.2020, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Alexkor5
Напишите что и где происходит в коде,
сдвигается блок со слайдами целиком влево или вправо -- строка 72
крайний левый слайд перемещается в конец цепочки слайдов (движение влево) строка 68 и наоборот крайний правый слайд в начало цепочки слайдов при движении вправо строка 58, попутно сохраняется новое положение слайда в параметре position(строки 56, 66)
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2020, 08:31
Новичок на форуме
Отправить личное сообщение для Alexkor5 Посмотреть профиль Найти все сообщения от Alexkor5
 
Регистрация: 30.08.2020
Сообщений: 6

Я сам знаю по коду что здесь происходит, но мне нужно больше деталей, например, каким образом добывается минимальный и максимальный элемент ...
Ответить с цитированием
  #4 (permalink)  
Старый 31.08.2020, 10:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Alexkor5
каким образом добывается минимальный и максимальный элемент ...
все слайды имеют параметр position(изменяется, строки 56, 66) и index(неизменно, слайды всегда на одном и том же месте в DOM) находится самая маленькая (большая) позиция(строки 27 и 36) и возвращается индекс этого слайда.

в строку 72 добавьте
console.log(_items.map(({position}) => position));


смотрите консоль, будет понятнее какой слайд на текущий момент максимальный и минимальный.

можно также для наглядности увеличить время анимации слайда тогда будет видна вся скрытая механика перемещений.
добавить вниз css
.slider {
      overflow:  visible;
      width: 70%;
    }
    .slider__item {
        transition: transform 1s ease;
    }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите разобраться с кодом swedenborg Общие вопросы Javascript 2 31.08.2016 17:05
Помогите разобраться с кодом js_newbie Общие вопросы Javascript 2 11.06.2015 21:11
помогите разобраться с кодом Mc'Intosh (X)HTML/CSS 3 25.03.2015 10:20
Помогите разобраться с кодом. TheWanderer Общие вопросы Javascript 10 17.04.2010 13:41
помогите с кодом разобраться olgatcpip Общие вопросы Javascript 1 02.10.2009 21:21