<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="osnova-slaydera">
  <div class="sucheniyem">
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/2711828.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/3302384.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/6209632.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/2536118.jpg"></div>
  <div class="adapevenys" data-img="http://zornet.ru/_fr/56/1625717.jpg"></div>
  </div>
  <div class="anemavilos">
  <div class="daptivnem">
  <h3>Слайдер в стильном оформление</h3>
  <p>Также присутствует краткое описание под каждое изображение.</p>
  </div>
  <div class="adnegon">
  <button class="btn-prev" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
  </button>
  <button class="btn-next">
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>  
  </button>
  </div>
  </div>
</div>

.osnova-slaydera {
  width: 100%;
  height: 485px;
  margin: 0px 0;
  padding: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  line-height: 23px;
  color: #4c4c4c;
  position: relative;
}
.sucheniyem {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  overflow: hidden;
}
.adapevenys {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  padding: 20px;
}
.left {
  left: -100%;
}
.right {
  left: 100%;
}
.anemavilos {
  position: absolute;
  width: 70%;
  max-width: 500px;
  bottom: 15%;
  right: 5%;
  pointer-events: none;
}
.daptivnem {
  position: relative;
  padding: 0.5em 2em 1em;
  background: #FFFFFF;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.daptivnem h3 {
  font-size: 1.7em;
  font-weight: normal;
  color: #337AB7;
}
.daptivnem p {
  font-family: Verdana, sans-serif;
}
.anemavilos:before {
  content: "";
  position: absolute;
  width: 65%;
  height: 80%;
  top: 0;
  left: 0;
  transform: translate(-10px, -10px);
  background: #337AB7;
}
.adnegon {
  position: absolute;
  bottom: -50px;
  right: 5%;
  pointer-events: all;
}
.adnegon button {
  transition: ease .4s;
}
.adnegon button svg {
  margin: 10px 0;
}
.adnegon .btn-prev, .adnegon .btn-next {
  width: 58px;
  height: 58px;
  margin-left: 8px;
  border: 2px solid #bad1e4;
  outline: none;
  border-radius: 100px;
  color: #f5f4f4;
  background: #145d9c;
  box-shadow: 0px 0px 15px 2px rgba(35, 35, 35, 0.6);
  cursor: pointer;
}
.adnegon button:hover {
  box-shadow: 0px 3px 30px 3px rgba(0,0,0,.5);
}
.adnegon button:disabled {
  box-shadow: 0px 1px 5px 0px rgba(41, 41, 41, 0.71);
  background: #5fb9ef;
  cursor: default;
}
.optional {
  width: 80%;
  max-width: 680px;
  margin: 6em auto;
  padding: 2em 3em;
  box-shadow:  
  0 3px 12px rgba(4, 4, 4, 0.16),  
  0 3px 12px rgba(4, 4, 4, 0.23);
}
@media (max-width: 620px) {
  body {
  font-size: 13px;
  line-height: 1.5em;
  }
  .anemavilos {
  position: absolute;
  width: 100%;
  max-width: 100%;
  bottom: 0;
  right: 0;
  }
  .daptivnem {
  padding: .5em 1.5em;
  box-shadow: none;
  }
  .adnegon {
  display: none;
  }
}

$(function(){
  var tolerance = 100;
  var speed = 650;
  var interactiveElements = $('input, button, a');
  var itemsLength = $('.adapevenys').length;
  var active = 1;
  for (i=1; i<=itemsLength; i++){
  var $layer = $(".adapevenys:nth-child("+i+")");
  var bgImg = $layer.attr("data-img");
  $layer.css({
  "background": "url("+bgImg+") no-repeat center / cover"
  });
  };
  setTimeout(function() {
  $(".adapevenys").css({
  "transition": "cubic-bezier(.4,.95,.5,1.5) "+speed+"ms"
  });
  }, 200);
  $(".adapevenys:not(:first)").addClass("right");
  function sucheniyemScreen() {
  $('.sucheniyem').on('mousedown touchstart', function(e) {
   
  var touch = e.originalEvent.touches;
  var start = touch ? touch[0].pageX : e.pageX;
  var difference;
  $(this).on('mousemove touchmove', function(e) {
  var contact = e.originalEvent.touches,
  end = contact ? contact[0].pageX : e.pageX;
  difference = end-start;
  });
  $(window).one('mouseup touchend', function(e) {
  e.preventDefault();
  // Переход вправо:
  if (active < itemsLength && difference < -tolerance) {
  $(".adapevenys:nth-child("+active+")").addClass("left");
  $(".adapevenys:nth-child("+(active+1)+")").removeClass("right");
  active += 1;
  btnDisable();
  };
  // Переход влево:
  if (active > 1 && difference > tolerance) {
  $(".adapevenys:nth-child("+(active-1)+")").removeClass("left");
  $(".adapevenys:nth-child("+active+")").addClass("right");
  active -= 1;
  btnDisable();
  };
  $('.sucheniyem').off('mousemove touchmove');
  });
  });
  };
  sucheniyemScreen();
  interactiveElements.on('touchstart touchend touchup', function(e) {
  e.stopPropagation();
  });
  // Кнопки:
  $(".btn-prev").click(function(){
  // Переход влево:
  if (active > 1) {
  $(".adapevenys:nth-child("+(active-1)+")").removeClass("left");
  $(".adapevenys:nth-child("+active+")").addClass("right");
  active -= 1;
  btnDisable();
  };
  });
  $(".btn-next").click(function(){
  // Переход вправо:
  if (active < itemsLength) {
  $(".adapevenys:nth-child("+active+")").addClass("left");
  $(".adapevenys:nth-child("+(active+1)+")").removeClass("right");
  active += 1;
  btnDisable();
  };
  });
  function btnDisable() {
  if (active >= itemsLength) {
  $(".btn-next").prop("disabled", true);
  $(".btn-prev").prop("disabled", false);
  }
  else if (active <= 1) {
  $(".btn-prev").prop("disabled", true);
  $(".btn-next").prop("disabled", false);
  }
  else {
  $(".btn-prev, .btn-next").prop("disabled", false);
  };
  };
});