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

<div class="slider">
  <div class="picture_movem">
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №1);"></div>
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №2);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №3);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №4);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №5);"></div>  
  <!-- Еще слайды -->
  <div class="podvika_snimka" style="background-image: url(Ссылка на изображение под номером №6);"></div>  
  </div>
  <div class="podvika_dukas"></div>
</div>

.slider {
  position: relative;
  height: 415px;
  margin: 36px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);  
  overflow: hidden;
  max-width: 776px;
   
}
.picture_movem {
  position: relative;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
  will-change: transform;
}
.podvika_snimka {
  float: left;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;  
}
.podvika_dukas {
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
}
.podvika_kilasd,  
.undikatos_dvulena {
  display: block;
  margin: 0 5px;
  height: 14px;
  background: rgba(221 221 221 / 47%);
  border-radius: 50px;
  cursor: pointer;
}
.undikatos_dvulena {
  position: absolute;
  background: white;
  width: auto;
  box-shadow: 0 4px 12px rgba(12 12 12 / 20%), 0 16px 20px rgba(12 12 12 / 20%);  
}
.undikatos_dvulena-left {
  transition: left 0.3s cubic-bezier(0.48, 0.88, 0.25, 1.17), right 0.3s 0.1s cubic-bezier(0.48, 0.88, 0.25, 1.17);
}
.undikatos_dvulena-right {
  transition: left 0.3s 0.1s cubic-bezier(0.48, 0.88, 0.25, 1.17), right 0.3s cubic-bezier(0.48, 0.88, 0.25, 1.17);
}

$(function() {
  $('.slider').each(function() {  
  let $th = $(this);
  $th.attr('data-pos', 1);
  let slide = $th.find('.podvika_snimka');
  let num = $th.find('.podvika_snimka').length;
  let dots = $th.find('.podvika_dukas');
  dots.prepend('<span class="undikatos_dvulena"></span>');
  for( let i = 1; i <= num; i++ ){  
  dots.append('<span style="width:' + 100 / num + '%" class="podvika_kilasd" data-pos="'+ i +'"></span>');  
  }
  $th.find('.picture_movem').css('width', 100 * num + '%');
  slide.css('width', 100 / num + '%');
  $th.find('.podvika_kilasd').on('click', function(){
  let currentPos = $th.attr('data-pos');
  let newPos = $(this).attr('data-pos');
  let newDirection = (newPos > currentPos ? 'right' : 'left');
  let currentDirection = (newPos < currentPos ? 'right' : 'left');
  $th.find('.undikatos_dvulena').removeClass('undikatos_dvulena-' + currentDirection);
  $th.find('.undikatos_dvulena').addClass('undikatos_dvulena-' + newDirection);  
  $th.attr('data-pos', newPos);  
  $th.find('.picture_movem').css('transform', 'translateX(-' + 100 / num * (newPos - 1) + '%)');  
  $th.find('.undikatos_dvulena').css({'left': 100 / num * (newPos - 1) + '%','right':100 - (100 / num) - 100 / num * (newPos - 1) + '%'});
  });  
  $th.find('.undikatos_dvulena').css({'left': 0,'right': 100 - (100 / num) + '%'});
  });
});