Edit in JSFiddle

<div class="slider__container">
  <ul class="slider__blocks__container">
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
    <li class="slider__blocks"><img src="http://via.placeholder.com/270x421" /></li>
  </ul>
  <ul class="slider__container__arrow">
    <li class="arrow__icon slider__container__arrow--prev"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>
    </li>
    <li class="arrow__icon slider__container__arrow--next"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
    </li>
  </ul>
</div>
.slider__container {
  height: 421px;
  width: 1312px;
  position: relative;
  margin: 82px 0;
  overflow: hidden;
}

.slider__blocks__container {
  height: 421px;
  width: 1218px;
  overflow: hidden;
  padding: 0;
  position: relative;
  white-space: nowrap;
  margin: 0 auto;
}

.slider__container__arrow {
  position: absolute;
  width: 100%;
  padding: 0;
  top: calc(50% - 18px);
}

.arrow__icon {
  display: block;
  position: absolute;
  font-size: 36px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.slider__container__arrow--next {
  right: 0;
}

.slider__blocks {
  height: inherit;
  width: 270px;
  display: inline-block;
  vertical-align: top;
  padding: 0 16px;
}

.slider__blocks img {
  object-fit: cover;
  height: inherit;
  width: inherit;
}

.slider__blocks:first-child {
  margin-left: 0;
}
$(".slider__container").each(function() {

  var _this = $(this),
    items_in_slide = 4,
    slider__blocks__margin = 0,
    slider__blocks_length = $(this).find('.slider__blocks').length,
    slider__blocks_next_how_many_slides = slider__blocks_length - items_in_slide,

    slider__blocks_width = parseInt($(this).find('.slider__blocks').width()) + parseInt($(this).find('.slider__blocks').css('padding-left').replace(/[^0-9\.]+/g, "")) + parseInt($(this).find('.slider__blocks').css('padding-right').replace(/[^0-9\.]+/g, "")),

    slider__blocks_last_margin = -(slider__blocks_width * slider__blocks_next_how_many_slides),

    all_slide_margin_together = slider__blocks_length * slider__blocks_width,
    only_one_slide = items_in_slide * slider__blocks_width;

  $(this).find('.slider__container__arrow--prev').click(function() {
    if (slider__blocks__margin == 0) {
      console.log("no more slides");
    } else {
      slider__blocks__margin = slider__blocks__margin + slider__blocks_width;
      _this.find('.slider__blocks:first-child').animate({
        marginLeft: slider__blocks__margin
      }, 500);
    }


  });
  $(this).find('.slider__container__arrow--next').click(function(index, x) {
    if (slider__blocks_last_margin == slider__blocks__margin || only_one_slide == all_slide_margin_together) {
      console.log("no more slides");
    } else {
      slider__blocks__margin = slider__blocks__margin - slider__blocks_width;
      _this.find('.slider__blocks:first-child').animate({
        marginLeft: slider__blocks__margin
      }, 500);
    }
  });


});