Как сделать слайдер более гибким?

Question

[qwerty12ss]

Добрый вечер. Подскажите пожалуйста, возможно ли и как сделать код более гибким. Я хочу что бы при добавлении кнопки и еще одного элемента слайдера, мне не пришлось лезть в js. Меня интересует часть с addEventListener, попробовал через цикл сделать, но не получается, выдает ошибку.

var slider_btn = document.querySelectorAll(".promo-slider__button");
var slider_item = document.querySelectorAll(".promo-slider__item");
 
var slid = function (number) {
    for (var i = 0; i < slider_btn.length; i++) {
        slider_item[i].classList.remove("promo-slider__item--active");
        slider_btn[i].classList.remove("promo-slider__button--active");
    }
    slider_item[number].classList.add("promo-slider__item--active");
    slider_btn[number].classList.add("promo-slider__button--active");
};
 
slider_btn[0].addEventListener("click", function () {
    slid(0);
});
 
slider_btn[1].addEventListener("click", function () {
    slid(1);
});
 
slider_btn[2].addEventListener("click", function () {
    slid(2);
});
 
slider_btn[3].addEventListener("click", function () {
    slid(3);
});

Answer 1

[hellcaster]

for (let i = 0; i < slider_btn.length; i++) {
	slider_btn[i].addEventListener("click", function() {
		slid(i);
	})
}

Comments

[qwerty12ss]

Делал то же самое, только в начале не писал let, сейчас все работает, спасибо. Но что означает let?

[BitRouter]

https://learn.javascript.ru/let-const

ну хоть немного самообразования вносите в тяжелые будни))

[qwerty12ss]

BitRouter, уже нашел, можете, пожалуйста подсказать, где можно найти список действий, просто очень много времени трачу на то, что бы найти их. Например, какой командой можно проскочить вниз по кнопке.

[BitRouter]

https://api.jquery.com/category/events/ - jQuery
https://learn.javascript.ru/introduction-browser-events - javascript
html
TOP
scroll

$(selector).click(function(e){
    let elementClick = $(this).attr("href");
    let scrollRow = $(this).data('type');
    let destination = $(elementClick).offset()[scrollRow];
    $("html:not(:animated),body:not(:animated)").animate({
      scrollTop: destination
    }, 800);
    return false;
});