<div class="slide-section">
  <div class="slide-img">1</div>
  <div class="slide-img">2</div>
  <div class="slide-img">3</div>
  <div class="slide-img">4</div>
  <div class="slide-img">5</div>
  <div class="slide-img">6</div>
  <div class="slide-img">7</div>
  <div class="slide-img">8</div>
</div>
  <div class="slider-controls">
    <span class="prev">Prev</span>
    <span class="next">Next</span>
  </div>

body {
  width:100%;
  overflow:hidden;
  margin:0;
}
div{
  width:100%;
  display:flex;
  transition:margin-left 0.25s linear 0s;
}
div .slide-img {
  width:25%;
  min-width:25%;
  margin-right:5px;
  height:25%;
  border:1px solid red;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.slider-controls {
  display :flex;
  justify-content:space-between;
}

$(document).ready(function(){
  v = $('.slide-section .slide-img').length;
 i = 1;
  var left = 0;
  var mrg = 0;
  var ht = $('.slide-section .slide-img').css('width');
  $('.slide-section .slide-img').css('height', ht);
  $('.next').click(function(){
         
  if(i<=(v-4)){
    left = left - 25;
    mrg = mrg+5;
  }else if(i > (v-4)){
      left = 0;
    i = 0;
    mrg=0;
    }
    $('.slide-section').css('margin-left','calc('+left+'% - '+mrg+'px)');
      i++;      
  });
  $('.prev').click(function(){
    if(i == 1) {
      left = -(v-4) * 25;
      mrg = (v-4) * 5;
      i = (v - 4) + 1;
    }else{
      left = left + 25;
      mrg = mrg - 5;
      i--;
    }
    $('.slide-section').css('margin-left','calc('+left+'% - '+mrg+'px)');
  });

});