Изначально я был привязан к intro1/intro2/intro3(т.е поменяв 2 строчки я стал получать ошибку. было так: this.main = document.querySelector(selector); this.slider = this.main.querySelector('.slider');) и соответственно в качестве селектора я передавал intro1/intro2 и тд и все работало как надо, решил привязаться сразу к слайдеру, но стал получать ошибку. Слайдер не работает корректно, получаю ошибку "Cannot read properties of null (reading 'addEventListener')" у кнопок
document.addEventListener("DOMContentLoaded", function(event) {
class MySlider {
position = 0;
itemMargin = 0;
constructor(selector, options = {}) {
this.slidesToShow = options.slidesToShow || 1;
this.sliderToScroll = options.sliderToScroll || 1;
this.main = document.querySelector(selector);
this.sliderWrapper = this.main.querySelector('.slider-wrapper');
this.btnPrev = this.main.querySelector('.btn-prev');
this.btnNext = this.main.querySelector('.btn-next');
this.items = this.main.querySelectorAll('.slider-slide');
this.itemWidth = this.main.clientWidth / this.slidesToShow;
this.itemsLength = this.items.length;
this.movePosition = this.sliderToScroll * this.itemWidth;
this.items.forEach((item) => {
item.style.minWidth = `${this.itemWidth}px`
})
this.btnNext.addEventListener('click', this.onNextClick.bind(this));
this.btnPrev.addEventListener('click', this.onPrevClick.bind(this));
this.checkBtns();
}
checkBtns = function() {
this.btnPrev.disabled = this.position === 0;
this.btnNext.disabled = this.position <= -(this.itemsLength - this.slidesToShow) * this.itemWidth;
}
setPosition = function() {
this.sliderWrapper.style.transform = `translateX(${this.position}px)`;
}
onPrevClick = function() {
const itemsLeft = Math.abs(this.position) / this.itemWidth;
if (itemsLeft >= this.sliderToScroll) {
this.position += this.movePosition;
} else {
this.position += this.itemsLeft * this.itemWidth;
}
this.setPosition();
this.checkBtns();
}
onNextClick = function() {
const itemsLeft = this.itemsLength - (Math.abs(this.position) + this.slidesToShow * this.itemWidth) / this.itemWidth;
if (itemsLeft >= this.sliderToScroll) {
this.position -= this.movePosition;
} else {
this.position -= this.itemsLeft * this.itemWidth;
}
this.setPosition();
this.checkBtns();
}
}
//Init Sliders
new MySlider('.slider1', {
slidesToShow: 3,
sliderToScroll: 3
});
new MySlider('.slider2',{
slidesToShow: 2,
sliderToScroll: 2
});
new MySlider('.slider3');
});
.intro {
width: 600px;
margin: 30px auto;
}
.slider {
background-color: pink;
overflow: hidden;
}
.slider-wrapper {
display: flex;
background-color: pink;
transition: transform .2s linear;
}
.slider-slide {
display: flex;
background-color: yellow;
height: 100px;
align-items: center;
justify-content: center;
}
.slider-slide:nth-child(3n + 1) {
background-color: red;
}
.slider-slide:nth-child(3n + 2) {
background-color: green;
}
.slider-slide:nth-child(3n + 3) {
background-color: orange;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main class="main">
<div class="intro">
<div class="slider slider1">
<div class="slider-wrapper">
<div class="slider-slide">1</div>
<div class="slider-slide">2</div>
<div class="slider-slide">3</div>
<div class="slider-slide">4</div>
<div class="slider-slide">5</div>
<div class="slider-slide">6</div>
<div class="slider-slide">7</div>
<div class="slider-slide">8</div>
<div class="slider-slide">9</div>
</div>
<div class="btns">
<button class="btn-prev">Назад</button>
<button class="btn-next">Вперед</button>
</div>
</div>
</div>
<div class="intro1">
<div class="slider slider2">
<div class="slider-wrapper">
<div class="slider-slide">1</div>
<div class="slider-slide">2</div>
<div class="slider-slide">3</div>
<div class="slider-slide">4</div>
<div class="slider-slide">5</div>
<div class="slider-slide">6</div>
<div class="slider-slide">7</div>
<div class="slider-slide">8</div>
<div class="slider-slide">9</div>
</div>
</div>
<div class="btns">
<button class="btn-prev">Назад</button>
<button class="btn-next">Вперед</button>
</div>
</div>
<div class="intro2">
<div class="slider slider3">
<div class="slider-wrapper">
<div class="slider-slide">1</div>
<div class="slider-slide">2</div>
<div class="slider-slide">3</div>
<div class="slider-slide">4</div>
<div class="slider-slide">5</div>
<div class="slider-slide">6</div>
<div class="slider-slide">7</div>
<div class="slider-slide">8</div>
<div class="slider-slide">9</div>
</div>
</div>
<div class="btns">
<button class="btn-prev">Назад</button>
<button class="btn-next">Вперед</button>
</div>
</div>
</main>
</body>
</html>