slider css and js

_slider.scss

ul.slider-list{
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	margin-top: 2em; 
	height: 5em;
	margin-left: 0;
}

$slideDuration: 5s;
$slideDelay: 0s;

.slider-element{
	width: 100%;
	text-align: center;
	font-size: 1.5em; 
	line-height: 3;
	position: absolute;
	top: 0; 
	left: -100%;
	  
	&:before,
	&:after {
		position: absolute;
		content: ' ';
		display: block;
		left: 0;
		right: 0;
		height: 3px;
	}

	&:first-child{
		&:before,
		&:after {
			background-color: $amenagementLight;
		}		
	}
	&:nth-child(2){
		&:before,
		&:after {
			background-color: $fmLight;
		}	
	}
	&:nth-child(3){
		&:before,
		&:after {
			background-color: $hrLight;
		}		
	}   
	&:nth-child(4){
		&:before,
		&:after {
			background-color: $travauxLight;
		}		
	}	
}

.slide-it{
	animation-name: slide;
	animation-duration: $slideDuration;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
	animation-iteration-count: infinite;
	
	&:before{
		animation-name: slideUpBottomBorder;
	}
	&:after{
		animation-name: slideDownTopBorder;		
	}

	&:before,
	&:after{
		animation-duration: $slideDuration / 2;
		// animation-delay: $slideDuration / 3;
		animation-direction: normal;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
		// animation-iteration-count: infinite;	  	
	}	  
}

@-webkit-keyframes slide {
    0% {
    	left: -100%;
    	opacity: 0;
    }
    25%{
    	left: 0;   	
    	background-color: $white;
    	opacity: 1;	
    }
    75%{
    	left: 0; 
    	background-color: $white;
    	opacity: 1;
    }    
    100% {
    	right: 100%;
    	opacity: 0;
    }
}

@keyframes slide {
    0% {
    	left: -100%;
    	opacity: 0;
    }
    25%{
    	left: 0;   	
    	background-color: $white;
    	opacity: 1;	
    }
    75%{
    	left: 0; 
    	background-color: $white;
    	opacity: 1;
    }    
    100% {
    	left: 100%; 
    	opacity: 0;
    }
}


@keyframes slideUpBottomBorder {
    0% {
    	bottom: -10em;
    	opacity: 0;
    }
    100%{
    	bottom: 0;
    	opacity: 1;
    }
}

@keyframes slideDownTopBorder {
    0% {
    	top: -10em;
    	opacity: 0;
    }
    100%{
    	top: 0;
    	opacity: 1;
    }
}

slider.js

/**
 * Apply class .slide-it to list of adn in front page
 */
function applyClassLoop(items, index, slideDuration) {
    index = index % $('#slider li').length;
    items.removeClass('slide-it');
    items.eq(index).addClass('slide-it');
   	
   	setTimeout(function() {
   		applyClassLoop( items, index + 1, slideDuration)
  	}, slideDuration);
}

applyClassLoop($('#slider li'), 0, 4500);