I can't make a fade slider

Question

During the layout of the slider, there was a problem that I could not make one picture invisible and the other visible. The error shown by the debugger: DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided contains HTML space characters, which are not valid in tokens. I found the same problem on stackoverflow, but there the questioner actually had spaces in the class names: Javascript InvalidCharacterError when modifying a css name with a space I couldn't find any gaps in my code.

Code:

    (function() {

    const slide = document.querySelectorAll('.fade-slider__item');
    const activeClass = document.querySelector('.fade-slider__item--visible')

    let index = 0;

    setInterval(function() {

        slide[index].classList.remove(activeClass);
        index++;
        slide[index].classList.add(activeClass);

        console.log(index);
    }, 5000)
    }());

.

        <ul class="fade-slider">
                    <li class="fade-slider__item fade-slider__item--style-one fade-slider__item--visible">
                        <div class="fade-slider__text-one">
                            <h1 class="lined-text">
                                <div class="lined-text__word">very</div>
                                <div class="lined-text__word">mesmerizing,</div>
                                <div class="lined-text__word lined-text__word--color-yellow">unexplored</div>
                                <div class="lined-text__word lined-text__word--color-yellow">space</div>
                            </h1>
                        </div>
                    </li>
                    <li class="fade-slider__item fade-slider__item--style-two">
                      <div class="fade-slider__text-two">
                          <h1 class="lined-text">
                              <div class="lined-text__word">So beautiful</div>
                              <div class="lined-text__word lined-text__word--color-yellow">universe</div>
                          </h1>
                      </div>
                  </li>
                </ul>

.

    .fade-slider {
       width: 100%;
       height: 100%;
       display: block;
    }

    .fade-slider__item{
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        position: absolute;
        opacity: 0;
    }

    .fade-slider__item--visible {
        opacity: 1;
    }

    .fade-slider__item--style-one {
        background: url(./img/lol.jpg) center center / contain no-repeat;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
    }

    .fade-slider__item--style-two {
        background: url(./img/kek.jpg) center center / contain no-repeat;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
    }

Answer 1

Your index is going higher and higher, till the point there are no sliders available anymore. You need to reset it to make it work:

let index = 0;

setInterval(function() {
    slide[index].classList.remove(activeClass);
    
    if (slide[index + 1]) {
        index++;
    } else {
        index = 0;
    }
    
    slide[index].classList.add(activeClass);
}, 5000)