<a href="https://codepen.io/marcodeluca/pen/RRpOyB"><h1>Resposive image slider CSS+JQUERY</h1></a>
<h2>By Marco De Luca</h2>
<div class="container1">
	<div class="slider">
		<div class="slider_wrapper">
			<div class="slide"><img src="https://unsplash.it/480/240?random=1" alt=""></div>
			<div class="slide"><img src="https://unsplash.it/480/240?random=2" alt=""></div>
			<div class="slide"><img src="https://unsplash.it/480/240?random=3" alt=""></div>
			<div class="slide"><img src="https://unsplash.it/480/240?random=4" alt=""></div>
		</div>
	</div>
</div>
<div class="container2">
	<div class="slider">
		<div class="slider_wrapper">
			<div class="slide"><img src="https://unsplash.it/480/240?random=5" alt=""></div>
			<div class="slide"><img src="https://unsplash.it/480/240?random=6" alt=""></div>
			<div class="slide"><img src="https://unsplash.it/480/240?random=7" alt=""></div>
		</div>
	</div>
</div>

/*Base style*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600");
body{
  background-color: #ccc;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
a{outline:0;color:inherit;background:transparent;font-size:100%;font-style:normal;list-style:none outside none;text-decoration:none;}
h1{
  position: relative;
  font-size: 48px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 5px #000;
  font-weight: bold;
  margin: 20px;
  transition: all .3s;
}
h1:hover{
  font-size: 54px;
  margin: 17px;
  text-shadow: 3px 3px 7.5px #000;
}
h2{
  font-size: 20px;
  color: #333;
  text-shadow: 1px 1px 2px #fff;
  margin-top: -12px;
}
.container1{
	width: 960px;
	margin: 30px auto;
  background-color: #fff;
  border: 4px solid #333;
  border-radius: 4px;
  box-shadow:0px 0px 20px #000;
}
.container2{
	width: 720px;
	margin: 30px auto;
  background-color: #fff;
  border: 4px solid #333;
  border-radius: 4px;
  box-shadow:0px 0px 20px #000;
}

/*Slider style*/
.slider{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.slider_wrapper{
	width: 0px; /*handled by jquery*/
	position: relative;
	left: 0;
	font-size: 0;
}
.slide{
	width: 0px; /*handled by jquery*/
	height: auto;
	display:inline-block;
}
.slide>img{
	width: 100%;
	height: 100%;
}

$(function(){
	if($(".slider")){
		var sliders = $(".slider");
		var nSliders = sliders.length;
		$.each(sliders,function(i,value){
			var slider = sliders.get(i);
			var sliderWrapper = $(".slider_wrapper",sliders[i]);
			var slides = $(".slide",sliderWrapper);
			var nSlides = slides.length;
			sliderWrapper.css({"width":(100*nSlides+"%")});
			slides.css({"width":(100/nSlides+"%")});
			function slide(n){
				setTimeout(
					function(){
						$(slider).animate(
							{height:$("img",$(slides)[n])[0].height},
							2000,
							"linear"
						);
						sliderWrapper.animate(
							{left:-100*n+"%"},
							2000,
							"linear",
							function(){
								if(-(parseInt(sliderWrapper.css("left").substr(0,sliderWrapper.css("left").length-2))) >= parseInt($(slider).css("width").substr(0,$(slider).css("width").length-2))*(nSlides-1)){
									slide(0);
								}else{
									slide(n+1);
								}
							}
						);
					},
					5000
				);
			}
			slide(0);
		});
	}
});