Я пытаюсь создать карусель изображений. Однако я сталкиваюсь с неожиданным поведением с анимацией/переходом непрозрачности.

У меня есть .active класс, который успешно переходит между этими тремя img . Этот .active класс добавляет opacity: 1; . Однако, когда последний img загружается в DOM, он сохраняет свой начальный opacity: 0; , и даже если .active класс добавляется к каждому img каждые шесть секунд, opacity он не меняется.

Я предполагаю, что это может быть проблемой CSS, но я ценю помощь!

Язык JavaScript

     const autoSlideshow = () => {
        const slides = document.querySelectorAll('.slides img')
        const slideDelay = 6000
        let currentSlide = 0
    
        slides[currentSlide].classList.add('.active')
    
        const nextSlide = () => {
            slides[currentSlide].classList.remove('.active')
            currentSlide = (currentSlide   1) % slides.length
            slides[currentSlide].classList.add('.active')
        }
    
        setInterval(nextSlide, slideDelay)
    }
    autoSlideshow()
 

CSS

 .slides img.active {
    opacity: 1;
    transition: opacity 2s ease-in-out;
}
.slides img {
    position: inherit;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}
 

HTML

 <div class="slides">
   <img src="img/ac62.jpg" alt="couple 1"> 
   <img src="img/b348.jpg" alt="couple 2">
   <img src="img/bk40.jpg" alt="couple 3">
</div>
 

Решение

 const autoSlideshow = () => {
    const slides = document.querySelectorAll('.slides img')
    const slideDelay = 6000
    let currentSlide = 0

    slides[currentSlide].classList.add('active')

    const nextSlide = () => {
        slides[currentSlide].classList.remove('active')
        currentSlide = (currentSlide   1) % slides.length
        slides[currentSlide].classList.add('active')
    }

    setInterval(nextSlide, slideDelay)
}
autoSlideshow()
 

заменить .active на active

Вам нужно удалить . из .active при добавлении в список классов или удалении из него. Поскольку вы уже выполняете classList.add / classList.remove , нет необходимости определять класс с .

 const autoSlideshow = () => {
        const slides = document.querySelectorAll('.slides img')
        const slideDelay = 6000
        let currentSlide = 0
    
        slides[currentSlide].classList.add('active')
    
        const nextSlide = () => {
            slides[currentSlide].classList.remove('active')
            currentSlide = (currentSlide   1) % slides.length
            slides[currentSlide].classList.add('active')
        }
    
        setInterval(nextSlide, slideDelay)
    }
    autoSlideshow() 

 .slides img.active {
    opacity: 1;
    transition: opacity 2s ease-in-out;
}
.slides img {
    position: inherit;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
} 

 <div class="slides">
   <img src="https://source.unsplash.com/random" alt="couple 1"> 
   <img src="https://source.unsplash.com/random" alt="couple 2">
   <img src="https://source.unsplash.com/random" alt="couple 3">
</div>