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

<section id="kenonsunsica" class="cameconselub">
  <ul class="konsecgetum-qadipisicing">
  <li class="placsaveag-saquidempod">
  <img src="Ссылка для картинки под номером №1" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Скрипты</h2>
  <p>Первое описание под изображение</p>
  </div>
  </li>

  <li>
  <img src="Ссылка для картинки под номером №2" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Название</h2>
  <p>Второе описание под картинку</p>
  </div>
  </li>

  <li>
  <img src="Ссылка для картинки под номером №3" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Ключевая фраза</h2>
  <p>третье описание на снимок</p>
  </div>
  </li>

  <li>
  <img src="Ссылка для картинки под номером №4" title="" alt="">

  <div class="belaudansum">
  <h2 class="kenonsunsica-title">Интернет ресурс</h2>
  <p>Описание на темно прозрачной форме</p>
  </div>
  </li>
  </ul>
  <div class="paesusadas-endemosag"></div>
  <ul id="gesanilpa-dunedazam" class="gesanilpa-dunedazam"></ul>
  </section>

.cameconselub {
  width: 798px;
  margin: 39px auto 0;
}

.konsecgetum-qadipisicing {
  z-index: 500;
  position: relative;
  width: 100%;
  height: 358px;
  background: #FFF;
  border: 5px solid #4b5973;
  overflow: hidden;
}

.konsecgetum-qadipisicing li {
  display: none;
}

.konsecgetum-qadipisicing .placsaveag-saquidempod {
  display: block;
}

.paesusadas-endemosag {
  width: 100%;
  height: 15px;
  position: relative;
}

.paesusadas-endemosag:after, .paesusadas-endemosag:before {
  content: '';
  position: absolute;
  background: #171c24;
  height: 100%;
  width: 50%;
  left: 10px;
  top: -20px;
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
  -webkit-box-shadow: 0 0 15px 8px #171c24;
  box-shadow: 0 0 15px 8px #171c24;
}

.paesusadas-endemosag:before {
  right: 10px;
  left: auto;
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}

.konsecgetum-qadipisicing img {
  position: absolute;
  max-width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

.konsecgetum-qadipisicing .belaudansum {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.65);
  width: 100%;
  padding: 10px;
  color: #FFF;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.konsecgetum-qadipisicing li:hover .belaudansum {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.konsecgetum-qadipisicing h2 {
  color: #00c5b9;
  font-size: 2em;
  font-weight: 400;
  margin-bottom: 6px;
}

.konsecgetum-qadipisicing p {
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4em;
}

.gesanilpa-dunedazam {
  margin-top: 15px;
  text-align: center;
}

.gesanilpa-dunedazam li {
  cursor: pointer;
  display: inline-block;
  background: #424f66;
  text-indent: -99999px;
  height: 12px;
  width: 12px;
  margin: 0 6px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.gesanilpa-dunedazam li.kegasenes {
  background: #00c5b9;
}

  @media only screen and (max-width: 825px) {
  .cameconselub {
  width: 500px;
  }

  .konsecgetum-qadipisicing {
  height: 260px;
  }
  }

  @media only screen and (max-width: 535px) {
  .cameconselub {
  padding: 5px;
  width: 100%;
  margin: 40px 0 0 0;
  }

  .konsecgetum-qadipisicing {
  height: 200px;
  }
   
  .konsecgetum-qadipisicing .belaudansum {
  display: none;
  }

  }

  @media only screen and (max-width: 410px) {
  .konsecgetum-qadipisicing {
  height: 160px;
  }
  }

$(function() {

  var kenonsunsicaModule = (function() {
  var pb = {};
  pb.el = $('#kenonsunsica');
  pb.items = {
  panels: pb.el.find('.konsecgetum-qadipisicing > li'),
  }

  var kenonsunsicaInterval,
  currentkenonsunsica = 0,
  nextkenonsunsica = 1,
  lengthkenonsunsica = pb.items.panels.length;

  pb.init = function(settings) {
  this.settings = settings || {duration: 8000};
  var items = this.items,
  lengthPanels = items.panels.length,
  output = '';

  for(var i = 0; i < lengthPanels; i++) {
  if(i == 0) {
  output += '<li class="kegasenes"></li>';
  } else {
  output += '<li></li>';
  }
  }

  $('#gesanilpa-dunedazam').html(output);

  activatekenonsunsica();

  $('#gesanilpa-dunedazam').on('click', 'li', function(e) {
  var $this = $(this);
  if(!(currentkenonsunsica === $this.index())) {
  changePanel($this.index());
  }
  });

  }

  var activatekenonsunsica = function() {
  kenonsunsicaInterval = setInterval(pb.startkenonsunsica, pb.settings.duration);
  }

  pb.startkenonsunsica = function() {
  var items = pb.items,
  controls = $('#gesanilpa-dunedazam li');

  if(nextkenonsunsica >= lengthkenonsunsica) {
  nextkenonsunsica = 0;
  currentkenonsunsica = lengthkenonsunsica-1;
  }

  controls.removeClass('kegasenes').eq(nextkenonsunsica).addClass('kegasenes');
  items.panels.eq(currentkenonsunsica).fadeOut('slow');
  items.panels.eq(nextkenonsunsica).fadeIn('slow');

  currentkenonsunsica = nextkenonsunsica;
  nextkenonsunsica += 1;
  }

  var changePanel = function(id) {
  clearInterval(kenonsunsicaInterval);
  var items = pb.items,
  controls = $('#gesanilpa-dunedazam li');

  if(id >= lengthkenonsunsica) {
  id = 0;
  } else if(id < 0) {
  id = lengthkenonsunsica-1;
  }

  controls.removeClass('kegasenes').eq(id).addClass('kegasenes');
  items.panels.eq(currentkenonsunsica).fadeOut('slow');
  items.panels.eq(id).fadeIn('slow');

  currentkenonsunsica = id;
  nextkenonsunsica = id+1;
  activatekenonsunsica();
  }

  return pb;
  }());

  kenonsunsicaModule.init({duration: 4000});

});