class Slider {
constructor(option) {
this.slider = option.slider;
this.slide = option.slide;
this.prev = option.prev;
this.next = option.next;
this.indicator = option.indicator;
this.index = 0;
}
showSlide(n) {
if (n < 0) {
this.index = 0;
}
if (n === this.slide.length) {
this.index = this.slide.length - 1;
}
this.slide.forEach((item) => {
const slide = item;
slide.style.display = 'none';
});
this.slide[this.index].style.display = 'block';
}
setIndicator(index) {
const n = index + 1;
this.indicator.textContent = n;
}
prevSlide() {
this.prev.addEventListener('click', () => {
this.showSlide(this.index -= 1);
this.setIndicator(this.index);
});
}
nextSlide() {
this.next.addEventListener('click', () => {
this.showSlide(this.index += 1);
this.setIndicator(this.index);
});
}
init() {
this.showSlide(this.index);
this.prevSlide();
this.nextSlide();
}
}
const slider = new Slider({
slider: document.querySelector('.text-slider'),
slide: document.querySelectorAll('.text-slider__slide'),
prev: document.querySelector('.text-slider__button--prev'),
next: document.querySelector('.text-slider__button--next'),
indicator: document.querySelector('.text-slider__indicator-index'),
});
slider.init();
Как правильно разбить методы, как вообще оформить правильнее, а главное как быть с
addEventListener-ами, их - вкладывать в отдельный метод, как это я сделал, может быть, в метод init их всунуть, как?
