No puedo hacer que esta presentación de diapositivas funcione bien en cada img.
Después de ajustarlo durante horas, llegué a la conclusión de que el problema tiene algo que ver con el tiempo y el intercambio de clases al mismo tiempo para todos los elementos, pero no puedo encontrar una manera de resolver el problema.
let slideIndexPrev = 1; let slideIndexCurr = 0; showSlides(); function showSlides() { let slides = document.getElementsByClassName("mySlides"); if (slideIndexPrev >= slides.length) {slideIndexPrev = 0} if (slideIndexCurr >= slides.length) {slideIndexCurr = 0} slides[slideIndexCurr].classList.add("fade-in"); slides[slideIndexCurr].classList.remove("fade-out"); slides[slideIndexPrev].classList.add("fade-out"); slides[slideIndexPrev].classList.remove("fade-in"); slideIndexPrev++; slideIndexCurr++; setTimeout(showSlides, 3000); // Change image every X seconds } * {box-sizing:border-box} /* Slideshow container */ .slideshow-container { display: flex; position: relative; min-width: 100%; min-height: 250px; border-bottom: 2px solid #333; } .mySlides img { display: flex; position: absolute; width: 100%; height: 100%; object-fit: cover; } /* Fading animation */ .fade-in { animation-name: fade-in; animation-duration: 2s; } .fade-out { animation-name: fade-out; animation-duration: 2s; } @keyframes fade-in { from {opacity: 0} to {opacity: 1} } @keyframes fade-out { from {opacity: 1} to {opacity: 0} } <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images --> <div class="mySlides"> <img src="https://ca- times.brightspotcdn.com/dims4/default/f652f70/2147483647/strip/true/crop/5389x3153+0+0/resize/1486x869!/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2Fa9%2F5b%2Fc621f3bc408e95c16b4538d87578%2Fla-photos-1staff-amazonstudios-210802a.jpg" style="object-position: 50% 40%;"> </div> <div class="mySlides"> <img src="https://i.pinimg.com/originals/c5/6b/d1/c56bd1d016ccd315aa9e8d3ec3c78bb7.png" style="object-position: 50% 47%;"> </div> <div class="mySlides"> <img src="https://wallpaperaccess.com/full/3203467.jpg" style="object-position: 50% 51%;"> </div>¡Gracias de antemano por cualquier ayuda brindada!
fade-in y uno con fade-out : eche un vistazo a la consola. Así que probablemente quieras cambiarlos en js para tener algo como esto: slides[slideIndexCurr].classList.add("fade-out"); slides[slideIndexCurr].classList.remove("fade-in"); slides[slideIndexPrev].classList.add("fade-in"); slides[slideIndexPrev].classList.remove("fade-out");opacity: 0; a tu clase fade-out .Ver el bolígrafo: https://codepen.io/rajniszp/pen/RwQpmZR
Si ayudé, se agradece votar :D