simple vanilla javascript slider using css

html

<img class="slide_image" src="some_url_img.jpg" alt="imagen login1">
<img class="slide_image" src="some_url_img.jpg" alt="imagen login2">

style.css

.slide_image{
    transition: opacity 1s ease-in;
}
.slide_image + .slide_image { opacity: 0; }

vanilla javascript slider.js

    var current = 0,
        slides = document.querySelectorAll(".slide_image");

    setInterval(function() {
        for (var i = 0; i < slides.length; i++) {
            slides[i].style.opacity = 0;
            slides[i].style.display = 'none';
        }
        current = (current != slides.length - 1) ? current + 1 : 0;
        slides[current].style.opacity = 1;
        slides[current].style.display = 'block';
    }, 6000);