Así que tengo un carrusel de imágenes que, por alguna razón que no puedo explicar, se rompe de forma extraña entre cada diapositiva. Lo que quiero decir con romper es que cada diapositiva (imagen) aparece durante aproximadamente un segundo, luego se vuelve blanca antes de mostrar la siguiente imagen durante un segundo y ese ciclo continúa. Cualquier ayuda es apreciada.
el css
* { box-sizing: border-box; } body { font-family: Verdana, sans-serif; margin: 0 } .mySlides { display: none } img { vertical-align: middle; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1s; animation-name: fade; animation-duration: 1s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } }el html
<div class="slideshow-container"> <div class="mySlides fade"> <img src="img/homebanner1.png" style="width:100%"> </div> <div class="mySlides fade"> <img src="img/homebanner2.png" style="width:100%"> </div> <div class="mySlides fade"> <img src="img/homebanner1.png" style="width:100%"> </div> </div>El JavaScript
var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for(i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if(slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex - 1].style.display = "block"; setTimeout(showSlides, 10000); // Change image every 10 seconds }El problema fue setTimeout(showSlides, 10000); // Change image every 10 seconds era un intervalo de tiempo diferente (10 segundos) pero el fade se configuró en cada 1 segundo, así como @-webkit-keyframes fadeOut se configuró en opacidad .4 to 1 y no 0.4 to 1
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1s; animation-name: fade; animation-duration: 1s; }