Господа, прошу Вашей помощи в оптимизации и рефакторинге 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), вот только моих знаний, к сожалению, пока не хватает, чтобы сообразить как это сделать.
Буду рад помощи с данным кодом и подсказками где и что мне следует прочесть и изучить, дабы не было в дальнейшем таких вопросов.
