Адаптивный слайдер карусель на JS + CSS

<div class="center">
  <div class="sationcognis">
  <div class="gedamplekos-manuvactung"></div>
  </div>
  <div class="kangodepam">  
  <ul>
  <li><img src="Ссылка на изображение №1" /></li>
  <li><img src="Ссылка на изображение №2" /></li>
  <li><img src="Ссылка на изображение №3" /></li>
  <li><img src="Ссылка на изображение №4" /></li>
  <li><img src="Ссылка на изображение №5" /></li>
  </ul>
  </div>
  </div>

.center {
  width: 1100px;
  margin: auto;
}

.sationcognis {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  border: 10px solid #efefef;
  border-top: 10px solid #ff8f3f;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
  top: 50%;
  left: 50%;
  transition: .3s;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: sationcognis 2s linear infinite;
}

.gedamplekos-manuvactung {
  width:40px;
  height: 40px;
  margin: auto;
  transform: translate(0, 0) rotate(0deg);
  border-radius: 50%;
  border: 8px solid #e2e2e2;
  border-bottom: 8px solid #66a0ff;
  animation: sationcognisInner 1s linear reverse infinite;
}

@keyframes sationcognis {
  100% {
  transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes sationcognisInner {
  100% {
  transform: translate(0, 0) rotate(360deg);
  }
}

.kangodepam {
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

.kangodepam ul {
  position: absolute;
}

.kangodepam li {
  float: left;
  line-height: 0;
  text-align: center;
}

.kangodepam li img {
  width: 100%;
}

.getusatedun {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
}

.getusatedun span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #606161;
  margin: 0 4px;
  transition: 0.1s;
  position: relative;
  top: 0;
}

.getusatedun span.active {
  background: orange;
  width: 10px;
  height: 10px;
}

.kangodepam > span {
  position: absolute;
  top: 50%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  padding: 6px 10px;
  margin: -10px 0 0;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.prev {
  left: 0;
  transform: rotate(90deg);
  transform-origin: 0 0;
}

.next {
  right: -1px;
  transform: rotate(-90deg);
  transform-origin: 100% 0%;
}

.kangodepam:hover span, .kangodepam:hover .gedekolas {
  transform: rotate(0deg);
}

.gedekolas {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  transform: translateY(50px);
  transition: .3s;
}

.gedekolas label {
  background: rgba(0, 0, 0, .4);
  padding: 10px;
  display: block;
}

.gedekolas .chkbox {
  display: none;
}

.gedekolas .chkbox:checked + label {
  background: rgba(0, 0, 0, .7);
}

@media (max-width: 1200px) {  
  .center {
  width: 100%;
  padding: 0 15px;
  }
}

$(function(){
   
  var liCount = $('.kangodepam li').length;
  var ulWidth = (liCount * 100);
  var liWidth = (100/liCount);
  var leftIncrement = (ulWidth/liCount);

  $('.kangodepam').height($('.kangodepam li img').height());
   
  $('.kangodepam img').on('load', function(){
  $('.sationcognis').fadeOut();
  $('.kangodepam').height($(this).height());
  })

  $(window).resize(function() {
  $('.kangodepam').css('height', $('.kangodepam li img').height());
  });  
   
  $('.kangodepam ul').css('width', ulWidth + '%');
  $('.kangodepam li').css('width', liWidth + '%');

  $('.kangodepam').append(function() {
  $(this).append('<div class="getusatedun"></div>');
  $(this).prepend('<span class="prev">prev</span><span class="next">next</span>');

  $(this).find('li').each(function(){
  $('.getusatedun').append('<span></span>');
  });
  });

  $('.kangodepam').css('height', $('.kangodepam li img').height());
   
  $('.getusatedun span:first-child').addClass('active');

  if(liCount > 2) {
  $('.kangodepam ul').css('margin-left', -leftIncrement + '%');
  $('.kangodepam ul li:last-child').prependTo('.kangodepam ul');
  } else if(liCount == 1) {
  $('.kangodepam span').css('display', 'none');
  $('.gedekolas').css('display', 'none');
  } else if(liCount == 2) {
  $('.kangodepam .prev').css('display', 'none');
  }

  function moveLeft() {
  $('.kangodepam ul').animate({
  left : -leftIncrement + '%'
  }, 500, function(){
  $('.kangodepam ul li:first-child').appendTo('.kangodepam ul');
  $('.kangodepam ul').css('left', '');

  if($('.getusatedun span').hasClass('active')) {

  if($('.getusatedun span.active').is(':last-child')) {
  $('span.active').removeClass('active');
  $('.getusatedun span:first-child').addClass('active');
  } else {
  $('span.active').next().addClass('active');
  $('span.active').prev().removeClass('active');
  }
  }
  });
  }

  function moveRight() {
  $('.kangodepam ul').animate({
  left : leftIncrement + '%'
  }, 500, function(){
  $('.kangodepam ul li:last-child').prependTo('.kangodepam ul');
  $('.kangodepam ul').css('left', '');

  if($('.getusatedun span').hasClass('active')) {

  if($('.getusatedun span.active').is(':first-child')) {
  $('span.active').removeClass('active');
  $('.getusatedun span:last-child').addClass('active');
  } else {
  $('span.active').prev().addClass('active');
  $('span.active').next().removeClass('active');
  }
  }
  });
  }

   
  if(liCount > 1) {
  invertalValue = setInterval(function() {
  moveLeft();
  }, 5000);
  }

  $('.prev').click(function(){
  moveRight();
  });

  $('.next').click(function(){
  moveLeft();
  });

});