Slider

HTML

<section class="first">
			<div class="slidercontainer">
				<img src="http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ford-gt-photo-658253-s-original.jpg" alt="image1" class="image1">
				<img src="http://dreamatico.com/data_images/car/car-8.jpg" alt="image2" class="image2">
				<img src="http://dreamatico.com/data_images/car/car-1.jpg" alt="image3" class="image3">
				<img src="http://uniquehdwallpapers.com/wp-content/uploads/2013/03/Cars-Chevrolet-Camaro-ss-Desktop-Wallpaper.jpg" alt="image4" class="image4">
			</div>
		</section>

CSS

.first{
	position: relative;
	margin-top: 30px;
	//background-color: red;
	margin-bottom: 30px;
}

.first .slidercontainer{
	position: relative;
	margin: 0px auto;
	overflow: hidden;
	width: 80%;
	height: 500px;
	border: 1px solid black;
}

.first .slidercontainer img{
	position: absolute;
  max-width: 100%;
  animation: fadein 2s infinite;
}

.image1{
	left: 0px;
}

.image2{
	left: 100%;
}

.image3{
	left: 200%;
}

.image4{
	left: 300%;
}

@keyframes fadein {
    0%   { opacity: 0; }
    50% {opacity: 0.5;}
  100% { opacity: 1; }
}

JavaScript

var imageActive = 1,
	moveSlider = setInterval(moveSliderImages,2000);
  
$(document).ready(function(){
	var imagesWidth = $(".first .slidercontainer").width();
	$(".first .slidercontainer img").width(imagesWidth);
});

function moveSliderImages() {
	var image1 = $(".image1"),
		image2 = $(".image2"),
		image3 = $(".image3"),
		image4 = $(".image4");

	if(imageActive<=3){
		image1.animate({"left":"-=100%"},500);
		image2.animate({"left":"-=100%"},500);
		image3.animate({"left":"-=100%"},500);
		image4.animate({"left":"-=100%"},500);
		imageActive++;
	}
	else if(imageActive == 4){
		image1.animate({"left":"0px"},500);
		image2.animate({"left":"100%"},500);
		image3.animate({"left":"200%"},500);
		image4.animate({"left":"300%"},500);
		imageActive = 1;
	}
}