Working Example Here

<section class="one" id="sliderHome">
    <div class="header-glider one-glide slide fly-in-one">
        <img src="/assets/images/"
            class="slideImage image-zoom" alt="">
        <div class="text-box">
            <p class="title">SLIDE ONE</p>
        </div>
    </div>
    <div class="header-glider slide two" style="display:none">
        <img src="/assets/images/"
            class="slideImage image-pan-right-to-left" alt="">
        <div class="text-box">
            <p class="title">SLIDE TWO</p>
        </div>
    </div>
    <div class="header-glider slide three" style="display:none">
        <img src="/assets/images/"
            class="slideImage image-pan-left-to-right" alt="">
        <div class="text-box">
            <p>SLIDE THREE</p>
        </div>

    </div>
</section>

<script>
    //array format is for slide divs inside div #slider

    var slidesHome = document.querySelectorAll('#sliderHome .slide');

    var slideposHome = 0;

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

    function slideLoopHome() {
        setTimeout(function () {
            document.querySelectorAll('#sliderHome .slide')[slideposHome].setAttribute('style', 'opacity:0;');
            setTimeout(function () {
                document.querySelectorAll('#sliderHome .slide')[slideposHome].setAttribute('style', 'opacity:1;z-index:9;');
            }, 60)
            document.querySelectorAll('#sliderHome .slide')[slideposHome].setAttribute('style', 'opacity:0;');
            setTimeout(function () { document.querySelectorAll('#sliderHome .slide')[slideposHome].setAttribute('style', 'display:none;opacity:0;'); }, 30)
            slideposHome++;
            if (slideposHome >= Object.keys(slidesHome).length) {
                slideposHome = 0
            }
            if (slideposHome < 100) {
                slideLoopHome();
            }
        }, 9500);
    }

    slideLoopHome();
</script>

<style>

section.one#sliderHome {background-color: #13283D;overflow:hidden;
    height:52vw;
    position: relative;
    z-index: 1;
    .header-glider {background-color: #13283D;position:relative;
		.slideImage {position:absolute;top:0;left:0;}
        .text-box{padding: 17.5vw 8vw 1vw;position: relative;z-index:2;
            h1, p.header {
                color:#fff;
                font-weight:600;
                font-family: 'Karla';
                font-size: 3.89vw;
                margin: 0;
                padding-top:.5vw;
            }
            p.header{padding-top:0;position: relative;top:-.5vw;}
            .title{
                color:#fff;
                font-size: 1.86vw;
                margin: 0;
                line-height: 1.3;
            }
            p.bottom{
                font-size:1.28vw;line-height:1.4;width: 43vw;padding-bottom: 1vw;
            }
            p.bottom.two {position: relative;top:-.5vw;margin-top:0;padding-bottom:0;}
            p, a {color:#fff;transition:.3s;}
            a:hover {color:#009ba4}
            .button:hover {color:#fff;}
			.phone-button {position: relative;left:3vw;display: inline-block;}
			.button{display:inline-block}
        }
    }
	.slide {
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    transition: opacity .6s ease;
	    opacity: 0;
	    /** FOR CROSS FADES **/
	    -web-animation: fadeIn .3s linear;
	    animation: fadeIn .3s linear;
	}
	.background-pan-right-left {
		background-size: 110%;
		animation: background-pan 13s, fadein 1.2s linear;
		-webkit-animation: background-pan 13s, fadein 1.2s linear;
	}
}

@keyframes background-pan {
    0% {background-position:0% 50%;}
    100% {background-position:100% 50%;}
}

@keyframes image-pan-right-to-left {
	0% {left:-5vw;}
	100% {left:0;}
}

.image-pan-right-to-left {
	width: 105vw;
	animation-name: image-pan-right-to-left;
	animation-duration: 13s;
	-webkit-animation-name: image-pan-right-to-left;
	-webkit-animation-duration: 13s;
}

@keyframes image-zoom {
	0% {width:100vw;top:0;left:0;}
	100% {width: 110vw;top:-5vw;left:-5vw;}
}

@keyframes image-pan-left-to-right{
	0% {left:0vw;}
	100% {left:-5vw;}
}

.image-pan-left-to-right{
	width: 105vw;
	animation-name: image-pan-left-to-right;
	animation-duration: 13s;
	-webkit-animation-name: image-pan-left-to-right;
	-webkit-animation-duration: 13s;
}

.image-zoom {
	animation-name: image-zoom;
	animation-duration: 13s;
	-webkit-animation-name: image-zoom;
	-webkit-animation-duration: 13s;
}

.fly-in-from-left {
	animation-name: fly-in-from-left;
	animation-duration: .5s;
}

@keyframes fly-in-one {
    0% {left:-80vw;}
    100% {left:0;}
}


</style>