<div class="slider">
  <div class="nowrap">
    <img src="http://placehold.it/200x300/c0c" alt="">
    <img src="http://placehold.it/200x300/0cc" alt="">
    <img src="http://placehold.it/200x300/c00" alt="">
    <img src="http://placehold.it/200x300/cf0" alt="">
    <img src="http://placehold.it/200x300/cfd" alt="">
  </div>
  <div class="markers"></div>
</div>

.slider {
  width: 200px;
  overflow: hidden;
  position: relative;
}

.nowrap {
  display: flex;
  position: relative;
  transition: 0.68s ease;
}

.markers {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

.mark {
  width: 100%;
  height: 98%;
}

.mark:hover {
  border-bottom: 5px solid #000;
}

window.onload = function () {
  let images = document.querySelectorAll(".nowrap img");
  let marker = "";
  for (let i = 0; i < images.length; i++) {
    let w = images[i].width * images.length;
    document.querySelector(".nowrap").style.width = w + "px";
    marker += `<div class="mark" data-pos="${images[i].width * i}"></div>`;
  }
  document.querySelector(".markers").innerHTML = marker;

  document.querySelectorAll(".markers .mark").forEach(function (el) {
    el.onmousemove = function () {
      document.querySelector(".nowrap").style.left = -el.dataset.pos + "px";
    };
  });
}; /* onload */