Why is the opacity not changing for images in this slideshow? (CSS, Javascipt)

user_9631465 0
Viewed 72

I am attempting to build an image carousel. However, I am running into an unexpected behavior with the opacity animation/transition.

I have an .active class that is successfully transitioning between the three img. This .active class adds opacity: 1;. However, as the last img loads into the DOM, it retains its initial opacity: 0;, and even though the .active class is added to each img every six seconds, the opacity doesn't change.

I imagine this might be a CSS issue, but I appreciate the help!

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>
slideshow css html javascript
2 Answers

Solution

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()

replace .active with active

user_66476730

You need to remove . from .active while adding to or removing from classList. Because you are already doing classList.add/classList.remove, there is no need to define a class with .

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>

user_92561890
Related