не могу сделать фэйд-слайдер

при верстке слайдера возникла проблема, что не могу сделать одну картинку невидимой, а другую видимой. Ошибка, которую показал дебагер: DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided ('[object HTMLLIElement]') contains HTML space characters, which are not valid in tokens. Я нашел такую же проблему на английском stackoverflow, но там у задающего вопрос действительно были пробелы в именах классов: https://stackoverflow.com/questions/22133722/javascript-invalidcharactererror-when-modifying-a-css-name-with-a-space У себя в коде я пробелы обнаружить не смог.

отрывок HTML:

    '''<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>'''

отрывок Css:

    '''.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;
}'''

Отрывок JS:

    '''(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)
}());'''