@IvanPsarev
It-любитель

Как оптимизировать и минимизировать код javascript в слайдере?

Господа, прошу Вашей помощи в оптимизации и рефакторинге JS кода в сладйере.
Имеется данная разметка:

<body>
  <div class="slider-wrapper-1" id="slide-wrapper">
    <div class="slider-controls">
          <button class="control-button" id="btnSlideOne"><span class="visually-hidden">Первый слайд</span></button>
          <button class="control-button" id="btnSlideTwo"><span class="visually-hidden">Второй слайд</span></button>
          <button class="control-button" id="btnSlideThree"><span class="visually-hidden">Третий слайд</span></button>
    </div>
  <!-- разметка -->
  </div>
</body>


И вот такой JS:
var slideWrapper = document.querySelector('#slide-wrapper');
var btnSlideArray = document.querySelectorAll('.control-button');

function slideChange(indexSlideOn, slideLength) {
  if (indexSlideOn >= slideLength) return;
  for (var i = 0; i < slideLength; i++) {
    if (i === indexSlideOn) {
      slideWrapper.classList.add('slider-wrapper-' + (i + 1));
    } else {
      slideWrapper.classList.remove('slider-wrapper-' + (i + 1));
    }
  }
}

btnSlideArray[0].addEventListener('click', function(evt) {
  evt.preventDefault();
  slideChange(0, btnSlideArray.length);
});

btnSlideArray[1].addEventListener('click', function(evt) {
  evt.preventDefault();
  slideChange(1, btnSlideArray.length);
});

btnSlideArray[2].addEventListener('click', function(evt) {
  evt.preventDefault();
  slideChange(2, btnSlideArray.length);
});


Данный код рабочий, классы переключаются, все работает. Вопрос мой в следующем:
глядя на конец JS кода, я понимаю, что события клика на кнопки как-то можно объединить и сделать более универсальными (чтобы при изменении количества слайдов не приходилось менять код JS), вот только моих знаний, к сожалению, пока не хватает, чтобы сообразить как это сделать.
Буду рад помощи с данным кодом и подсказками где и что мне следует прочесть и изучить, дабы не было в дальнейшем таких вопросов.
  • Вопрос задан
  • 182 просмотра
Решения вопроса 1
@NonameMeTrue
[].forEach.call(btnSlideArray, function(el, i) {
	el.addEventListener('click', function(evt) {
		evt.preventDefault();
		slideChange(this.valueOf(), btnSlideArray.length);
	}.bind(i));
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы