Javascript and css slider 2

css.css

.img_container{
    overflow: hidden;
    max-height: 300px;
    border-radius: 4px;
    -webkit-box-shadow: 2px 0px 5px -2px rgba(128, 128, 128, 0.76);
    -moz-box-shadow: 2px 0px 5px -2px rgba(128, 128, 128, 0.76);
    box-shadow: 2px 0px 5px -2px rgba(128, 128, 128, 0.76);
}
.mySlides {display: none;}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

html.html

            <div class="img_container">
                <div class="mySlides fade">
                    <img class="slide_image" src="<?= Assets::setAssets('images/login/login1.png') ?>" alt="imagen login1">
                </div>

                <div class="mySlides fade">
                    <img class="slide_image" src="<?= Assets::setAssets('images/login/login2.png') ?>" alt="imagen login2">
                </div>
            </div>

js.js

    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, 2000); // Change image every 2 seconds
    }