gpt4 book ai didi

javascript - 如何让这个 Carousel Slider 自动滑动?

转载 作者:行者123 更新时间:2023-11-30 14:00:43 25 4
gpt4 key购买 nike

我做了这个slider但是没有自动滑动,我应该添加什么代码让这个自动滑动?我应该把代码放在哪里?

我已尝试为 goNext 函数设置 setinterval 但仍然无法正常工作

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")
});

所以如果有人能告诉我如何让这个轮播 slider 自动滑动,我将非常感激。

最佳答案

直接调用下一个函数

setInterval(function()
{
slider.goNext();
}, 1000);

关于javascript - 如何让这个 Carousel Slider 自动滑动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56352112/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com