简体   繁体   English

如何使该旋转木马滑块自动滑动?

[英]How To Make This Carousel Slider Automatically sliding?

I have this slider done but not automatically sliding, what code should I add to make this automatic sliding? 我已经完成了此滑块,但没有自动滑动,应该添加什么代码来使该自动滑动? And where should I place that code in this? 我应该将该代码放在哪里?

I've tried to put setinterval for the goNext function but still not working 我试图把setintervalgoNext功能,但仍无法正常工作

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

So please if anyone could tell me how to make this carousel slider automatically sliding, I will really really appreciate that. 因此,如果有人能告诉我如何使该旋转木马滑块自动滑动,我将非常感谢。

Just call the next function 只需调用下一个函数

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM