So I have an image carousel that for some reason I cannot explain is breaking strangely between each slide. What I mean by breaking is that each slide (image) appears for about one second then goes white before showing the next image for a second and that loop continues. Any help is appreciated.

The 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
                }
            }

The 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>

The 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
            }