Edit in JSFiddle

function hideTrigger() {
	leftTrig.removeAttribute("hidden"); 
  rightTrig.removeAttribute("hidden");
  switch (pos) {
    case 0:
      leftTrig.setAttribute("hidden", "");
      break;
    case posMax:
      rightTrig.setAttribute("hidden", "")
  }
}

function moveHelper() {
  boxesCont.style.transform = slideHelper(), hideTrigger(), setTimeout(function() {
    end = boxCont[posMax].getBoundingClientRect().left <= window.innerWidth ? 1 : 0
  }, 300)
}

function slideHelper() {
  return "translate(-" + boxSize * pos + "px)"
}

function moveRight() {
  pos < posMax && (end ? endHelper() : (pos++, moveHelper()))
}

function moveLeft() {
  pos > 0 && (pos--, moveHelper())
}

function moveTo(e) {
  e >= 0 && e <= posMax && (pos = e, moveHelper())
}

function endHelper() {
  pos++;
  let edgeDif = boxSize - boxMargin - (window.innerWidth - boxCont[posMax].getBoundingClientRect().left);
  rightTrig.setAttribute("hidden", ""), boxesCont.style.transform = "translate(-" + (boxSize * (pos - 1) + edgeDif) + "px)"
}

var leftTrig = document.querySelector(".directional.left");
var rightTrig = document.querySelector(".directional.right");
var boxesCont = document.querySelector(".shelf .boxes");
var boxCont = boxesCont.querySelectorAll(".box");
var boxStyle = boxCont[0].currentStyle || window.getComputedStyle(boxCont[0]);
var boxMargin = parseFloat(boxStyle.marginLeft);
var boxSize = boxCont[0].offsetWidth + 2 * boxMargin;
var end = 0;
var pos = 0;
var posMax = boxCont.length - 1;

leftTrig.addEventListener("click", function() {
  moveLeft()
});
rightTrig.addEventListener("click", function() {
  moveRight()
});

moveHelper();
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non scelerisque lorem, sit amet mollis quam. Maecenas id magna euismod, maximus ante sed, blandit quam. Suspendisse quis sapien odio. In hac habitasse platea dictumst. Vivamus in nulla nibh. Maecenas finibus rhoncus interdum. Sed sit amet interdum nibh, id venenatis libero. Nullam dignissim pretium ornare.
</p>
<div class="shelf">
  <button class="directional left">&lsaquo;</button>
  <div class="boxes">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <button class="directional right">&rsaquo;</button>
</div>
<p>
In hac habitasse platea dictumst. In sit amet urna sit amet sapien tempor blandit. In hac habitasse platea dictumst. Phasellus volutpat erat vitae facilisis aliquet. Mauris eget erat interdum, scelerisque mi non, elementum nunc. Praesent porta urna eget commodo luctus. Ut vel lacus nec mi porta aliquam ut vitae nunc. Aenean eget erat sagittis, sodales quam et, finibus lorem. Cras aliquet risus et elit facilisis malesuada. Etiam gravida luctus mauris nec tincidunt. Fusce molestie non felis id vulputate. Etiam lectus nunc, pellentesque sed tincidunt id, mollis vitae neque. Suspendisse a sapien sodales, blandit ligula ut, malesuada orci. Donec nec lobortis massa.
</p>
body {
  margin: 0;
  font-family: Roboto;
  text-align: justify;
}

.shelf {
  position: relative;
  overflow-x: hidden;
  font-size: 0;
}

.shelf button.directional {
  position: absolute;
  transition: opacity 0.3s cubic-bezier(.25, .8, .25, 1);
  height: 100%;
  width: 30px;
  top: 0;
  opacity: 0;
  border: 0;
  border-radius: 0;
  background: rgba(55, 71, 79, 0.4);
  color: #F5F5F5;
  cursor: pointer;
  z-index: 9999;
}

.shelf button.directional.left {
  left: 0;
}

.shelf button.directional.right {
  right: 0;
}

.boxes {
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}

.box {
  display: inline-block;
  border-radius: 2px;
  height: 200px;
  width: 350px;
  margin: 0 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  vertical-align: top;
  font-size: 16px;
}

.box:nth-child(even) {
  background: #f44336;
}

.box:nth-child(odd) {
  background: #2196F3;
}

.shelf:hover button.directional {
  opacity: 1;
}

.shelf:hover button.directional:hover {
  background: rgba(55, 71, 79, 0.8);
}

*[hidden] {
  display: none;
}