<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);
    });
  }
});