<body>
  <div class="slide-window">
    <span class="slider" id="leftNav"></span>
    <div class="container">
      <div class="slide" id="slide1">
        <img src="https://images.unsplash.com/photo-1590773301331-42b4fad84a1f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
        <div class="info-box"><p>Slide One Text</p></div>
      </div>
      <div class="slide" id="slide2">
        <img src="https://images.unsplash.com/photo-1589959494651-5ecf405ee860?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
        <div class="info-box"><p>Slide Two Text</p></div>
      </div>
      <div class="slide" id="slide3">
        <img src="https://images.unsplash.com/photo-1589472088636-92e9e87cca7f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
        <div class="info-box"><p>Slide Three Text</p></div>
      </div>
      <div class="slide" id="slide4">
        <img src="https://images.unsplash.com/photo-1590419845293-416fc50706f7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
        <div class="info-box"><p>Slide Four Text</p></div>
      </div>
    </div>
    <span class="slider" id="rightNav"></span>
  </div>
</body>
.slide-window {
  width: 100%;
  max-width: 920px;
  height: auto;
  overflow: hidden;
  position: relative;
  margin: auto;
}

.slider {
  display: block;
  text-indent: -10000px;
  position: absolute;
  cursor: pointer;
}

.slide img {
  width: 100%;
  max-height: 950px;
}

.slide .info-box {
  position: relative;
  z-index: 1001;
  width: 100%;
  background: rgba(0,0,0,0.7);
  padding: 15px 0;
  color: #fff;
  font-family: sans-serif;
  margin-top: -5px;
}

.slide .info-box p {
  padding: 0 10px;
  text-align: center;
}

#rightNav,
#leftNav {
  top: calc(50% - 26px);
  position: absolute;
  width: 20px;
  height: 53px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/406156/slider-arrow.png);
  background-repeat: no-repeat;
  z-index: 999;
}

#rightNav {
  right: 0;
  -webkit-transform: scaleX(-1);
}

#leftNav {
  left: 0;
}

.container {
  width: 400%; /* change so NUMBER OF SLIDES x 100% = width */
  background-color: blue;
  margin-left: 0%;
  transition: margin-left 1s;
}

.slide {
  width: 25%; /* change so NUMBER OF SLIDES / 100% = width */
  height: auto;
  float: left;
}
View Compiled 
$(document).ready(function() {

  $('#leftNav').click(moveSlideLeft).click(setMarginWidth);
  $('#rightNav').click(moveSlideRight).click(setMarginWidth);

  var slidePosition = 0;

  function setMarginWidth() {
    var slideHolderMargin = -100 * slidePosition;
    $('.container').css("margin-left", slideHolderMargin + '%');
  }

  function moveSlideRight() {
    if (slidePosition == 3) { // change so NUMBER OF SLIDES - 1 = slidePosition
      slidePosition = 0
    } else {
      slidePosition++;
    }
  }

  function moveSlideLeft() {
    if (slidePosition == 0) {
      slidePosition = 3 // change so NUMBER OF SLIDES - 1 = slidePosition
    } else {
      slidePosition = slidePosition - 1;
    }
  }

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js