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>
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.