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

Question

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>

Shashikant Yadav - Kantbtrue · Accepted Answer · 2021-05-20 04:39:57Z

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

TechySharnav · Accepted Answer · 2021-05-20 05:34:24Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Solution

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution

Comments

Comments

Related