Адаптивный слайдер изображений на CSS3

<div id="container">  
  <div id="next" alt="Next" title="Next">
  <div class="guctedexab-lenduseas"></div>
  </div>
  <div id="prev" alt="Prev" title="Prev">  
  <div class="kicemogsa-mudsalend"></div>
  </div>  
  <div id="nagdesanykav">
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Первый заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №1</p>
  </div>
  <div class="img1"><img src="http://zornet.ru/_fr/56/0832989.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Второй заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №2</p>
  </div>
  <div class="img2"><img src="http://zornet.ru/_fr/56/8098683.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Третий заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №3</p>
  </div>
  <div class="img3"><img src="http://zornet.ru/_fr/56/9482363.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Четверочный заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №4</p>
  </div>
  <div class="img4"><img src="http://zornet.ru/_fr/56/3317342.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Пятое название</h2>
  <p>Здесь идет описание к изображению или материал под номером №5</p>
  </div>
  <div class="img5"><img src="http://zornet.ru/_fr/56/4710014.jpg"></div>
  </div>
  </div>
  </div>

h1{
  text-align:center;
  margin-bottom:20px;
}

#container{
  width:80%;
  margin:40px auto;
}

p{
  margin:0;
  padding:0 35px 0 0;
}

#nagdesanykav{
  width:100%;
  height:350px;
  position:relative;
  overflow:hidden;
  float:left;
  padding:0;
  border:#666 solid 2px;
  border-radius:5px;
}

#nagdesanykav img{
width: 100%;
  height:350px;
}

.img1, .img2, .img3, .img4, .img5 {
  width:100%;
  margin:0;
  padding:0;
}  

.kavsgucted{
  position:absolute;
  width:100%;
  height:100%;
}
.kavsgucted:nth-child(1){
  background:#ce6868;
}

.kavsgucted:nth-child(2){
  background:#9ab6b6;
}

.kavsgucted:nth-child(3){
  background:#98cc98;
}

.kavsgucted:nth-child(4){
  background:#e7b892;
}

.kavsgucted:nth-child(5){
  background:#c4ad43;
}

.gesdesig-ngaeaturing{
  position:absolute;
  bottom:0;
  left:0;
  padding:10px 20px 20px 20px;
  background:7f7f7f;
  background: rgba(0,0,0,0.5);
  width:100%;
  max-height:32%;
}

#prev, #next{
  cursor:pointer;
  z-index:100;
  background:#666;
  height:50px;
  width:50px;
  display:inline-block;
  position:relative;
  top:197px;
  margin:0;
  padding:0;
  opacity:0.7;
  filter: alpha(opacity=70);
}

#next{
  float:right;
  right:-2px;
}

#prev{
  float:left;
  left:0;
}

.guctedexab-lenduseas {
  width: 0;  
  height: 0;  
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;  
  border-left: 15px solid #fff;
  position:relative;
  top:20%;
  right:-40%;
}

.kicemogsa-mudsalend {
  width: 0;  
  height: 0;  
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;  
  border-right:15px solid #fff;  
  position:relative;
  top:20%;
  left:30%;
}

$(document).ready(function(){
  var speed = 500;  
  var autoswitch = true;  
  var autoswitch_speed = 5000;  
  $(".kavsgucted").first().addClass("desanysaeges");
   
  $(".kavsgucted").hide;
   
  $(".desanysaeges").show();
   
  $('#next').on('click', nextkavsgucted);  
  $('#prev').on('click', prevkavsgucted);

  if(autoswitch == true){
  setInterval(nextkavsgucted,autoswitch_speed)
  }
   
  function nextkavsgucted(){
  $('.desanysaeges').removeClass('desanysaeges').addClass('olddesanysaeges');
  if($('.olddesanysaeges').is(':last-child')){
  $('.kavsgucted').first().addClass('desanysaeges');
  } else {
  $('.olddesanysaeges').next().addClass('desanysaeges');
  }
  $('.olddesanysaeges').removeClass('olddesanysaeges');
  $('.kavsgucted').fadeOut(speed);
  $('.desanysaeges').fadeIn(speed);
  }
   
  // Switch to prev kavsgucted
  function prevkavsgucted(){
  $('.desanysaeges').removeClass('desanysaeges').addClass('olddesanysaeges');
  if($('.olddesanysaeges').is(':first-child')){
  $('.kavsgucted').last().addClass('desanysaeges');
  } else {
  $('.olddesanysaeges').prev().addClass('desanysaeges');
  }
  $('.olddesanysaeges').removeClass('olddesanysaeges');
  $('.kavsgucted').fadeOut(speed);
  $('.desanysaeges').fadeIn(speed);
  }
});