<div id="slider">
    <p class="slide fadeIn active">Slider One</p>
    <p class="slide fadeIn active" style="display:none;">Slider Two</p>
    <p class="slide fadeIn active" style="display:none;">Slider Three</p>
    <p class="slide fadeIn active" style="display:none;">Slider Four</p>
</div>

        /****************
        FADING SLIDER
        ****************/
        #slider {
            position: relative;
            height:4vw;
        }
        #slider .slide {
            position:absolute;
            opacity: 0;
        }
        @keyframes fadeIn {
            0% {opacity:0;filter:blur(10px);}
            100% {opacity:1;filter:blur(0px);}
        }
        .fadeIn {opacity:0;filter:blur(10px);}
        .fadeIn.active {animation:fadeIn .5s ease forwards;-webkit-animation:fadeIn .5s ease forwards;}

    <script>
    var slides = document.querySelectorAll('#slider .slide');

    var slidepos = 0;

    document.querySelectorAll('#slider .slide')[slidepos].setAttribute('style', 'opacity:1;z-index:9;');

    function slideLoop() {
    setTimeout(function(){
    document.querySelectorAll('#slider .slide')[slidepos].setAttribute('style', 'opacity:0!important;display:none;');
    setTimeout(function(){
    document.querySelectorAll('#slider .slide')[slidepos].setAttribute('style', 'opacity:1;z-index:9;');
    }, 60)
    document.querySelectorAll('#slider .slide')[slidepos].setAttribute('style', 'opacity:0!important;display:none;');
    setTimeout(function(){document.querySelectorAll('#slider .slide')[slidepos].setAttribute('style',
    'display:none;opacity:0;');},30)
    slidepos++;
    if (slidepos >= Object.keys(slides).length) {
    slidepos = 0
    }
    if (slidepos < 100) { slideLoop(); } }, 2500); } slideLoop();
    </script>