如何使此视差滑块自动滑动

Question

I have parallax slider. I want this to automatically slide to end and then slide to beginning. I am new on JavaScript wasted 2 hours by trying.

setInterval(changeSlide, 2000);

function changeSlide() {
    var next, prev, slideCount, currentSlide, slideDirection;
    next = document.getElementById('next-slide');
    prev = document.getElementById('prev-slide');
    slideCount = document.getElementById('slider-dots').childNodes.length;
    currentSlide = 1;
    slideDirection = 1;

    if (slideDirection === 1) {
        next.click();
        currentSlide++;
        if (currentSlide === slideCount) {
            slideDirection = -1;
        }
    }

    if (slideDirection === -1) {
        prev.click();
        currentSlide--;
        if (currentSlide === 1) {
            slideDirection = 1;
        }
    }
}

Answer 1

You are close, all you need is to correct your if else logic, also extract your variables initializations out of the function.

By the way I would like to give you an example which could help you improve your logic or rewrite it.

 // INIT VARS BY YOUR LOGIC let currentSlide = 1, slidesLength = 10 // GET YOUR .slider-dots, direction = 'up'; const animateSlide = (slideNumber, direction) => { // HERE YOU COULD CALL YOUR SLIDER API/FUNCTION // WHICH ANIMATES YOUR SLIDER, IT IS NOT NEEDED TO SIMULATE CLICK // eg direction === 'up' ? slider.next() : slider.prev() | slider.goTo(slideNumber) // WHAT EVER IS YOUR SLIDER API // YOU COULD PUT ALSO A LOGIC FOR clearInterval(slideInterval); // IN ORDER TO DISABLE THE AUTOMATIC MODE console.log(slideNumber, direction); } const changeSlide = () => { if (currentSlide === slidesLength) { direction = 'down'; } else if (currentSlide === 1) { direction = 'up'; } switch (direction) { case 'up': currentSlide += 1; break; case 'down': currentSlide -= 1; break; default: currentSlide = 1; console.error('unknown direction'); } animateSlide(currentSlide, direction); } const slideInterval = setInterval(changeSlide, 2000);