Я создаю слайдер карусели с этим кодом, но я не могу понять, как сделать этот слайдер автоматически скользящим. Что мне нужно, чтобы этот слайдер автоматически скользил?
class Slider {
constructor(props) {
this.rootElement = props.element;
this.slides = Array.from(
this.rootElement.querySelectorAll(".slider-list__item")
);
this.slidesLength = this.slides.length;
this.current = 0;
this.isAnimating = false;
this.direction = 1; // -1
this.navBar = this.rootElement.querySelector(".slider__nav-bar");
this.thumbs = Array.from(this.rootElement.querySelectorAll(".nav-control"));
this.prevButton = this.rootElement.querySelector(".slider__arrow_prev");
this.nextButton = this.rootElement.querySelector(".slider__arrow_next");
this.slides[this.current].classList.add("slider-list__item_active");
this.thumbs[this.current].classList.add("nav-control_active");
this._bindEvents();
}
goTo(index, dir) {
if (this.isAnimating) return;
var self = this;
let prevSlide = this.slides[this.current];
let nextSlide = this.slides[index];
self.isAnimating = true;
self.current = index;
nextSlide.classList.add("slider-list__item_active");
}
goStep(dir) {
let index = this.current + dir;
let len = this.slidesLength;
let currentIndex = (index + len) % len;
this.goTo(currentIndex, dir);
}
goNext() {
this.goStep(1);
}
goPrev() {
this.goStep(-1);
}
_navClickHandler(e) {
var self = this;
if (self.isAnimating) return;
let target = e.target.closest(".nav-control");
if (!target) return;
let index = self.thumbs.indexOf(target);
if (index === self.current) return;
let direction = index > self.current ? 1 : -1;
self.goTo(index, direction);
}
_bindEvents() {
var self = this;
["goNext", "goPrev", "_navClickHandler"].forEach(method => {
self[method] = self[method].bind(self);
});
self.nextButton.addEventListener("click", self.goNext);
self.prevButton.addEventListener("click", self.goPrev);
self.navBar.addEventListener("click", self._navClickHandler);
}
}
// ===== init ======
let slider = new Slider({
element: document.querySelector(".slider")
});
Я также пытался добавить этот код в файл js и добавить mySlides и класс точек в слайдер. Но все еще не работает
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
Вот HTML-код слайдера,
<div class="slider">
<ul class="slider-list">
<li class="mySlides slider-list__item ">
<span class="back__element">
<img src="assets/img/back_mango_002.png" />
</span>
<span class="main__element">
<img src="assets/img/bottle_mango_002.png" />
</span>
<span class="front__element">
<img src="assets/img/front_mango_002.png" />
</span>
<span class="title__element">
<span class="title">mango</span>
</span>
<span class="more__element">
<span class="content">
<span class="headline">mango</span>
<span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
<span class="link">
<div class="fill"></div>
<a href="#">Open catalog</a>
</span>
</span>
</span>
</li>
<li class="mySlides slider-list__item">
<span class="back__element">
<img src="assets/img/back_bananas_001.png" />
</span>
<span class="main__element">
<img src="assets/img/bottle_bananas_001.png" />
</span>
<span class="front__element">
<img src="assets/img/front_bananas_001.png" />
</span>
<span class="title__element">
<span class="title">bananas</span>
</span>
<span class="more__element">
<span class="content">
<span class="headline">bananas</span>
<span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
<span class="link">
<div class="fill fill-dark"></div>
<a href="#">Open catalog</a>
</span>
</span>
</span>
</li>
<li class="mySlides slider-list__item">
<span class="back__element">
<img src="assets/img/back_oranges_003.png" />
</span>
<span class="main__element">
<img src="assets/img/bottle_oranges_003.png" />
</span>
<span class="front__element">
<img src="assets/img/front_oranges_003.png" />
</span>
<span class="title__element">
<span class="title">oranges</span>
</span>
<span class="more__element">
<span class="content">
<span class="headline">oranges</span>
<span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
<span class="link">
<div class="fill"></div>
<a href="#">Open catalog</a>
</span>
</span>
</span>
</li>
</ul>
<div class="slider__nav-bar">
<a class="dot nav-control"></a>
<a class="dot nav-control"></a>
<a class="dot nav-control"></a>
</div>
<div class="slider__controls">
<a class="slider__arrow slider__arrow_prev"></a>
<a class="slider__arrow slider__arrow_next"></a>
</div>
</div>
Я ожидаю, что ползунок будет автоматически скользить, когда я добавлю класс mySlides и dot, но вместо этого он просто мигает