<div class="slider">
  <div class="nowrap">
    <div class="item">
      <img src="http://placehold.it/220x200/cca" alt="">
    </div>
    <div class="item">
      <img src="http://placehold.it/220x200/ccd" alt="">
    </div>
    <div class="item">
      <img src="http://placehold.it/220x200/cc0" alt="">
    </div>
  </div>
  <div class="markers">
    <div class="marker" data-position="0"></div>
    <div class="marker" data-position="-220"></div>
    <div class="marker" data-position="-440"></div>
  </div>
</div>

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

.nowrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 660px;
  transition: 0.34s linear;
}

.nowrap,
.markers {
  display: flex;
  justify-content: space-between;
}

.markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.markers div {
  width: 100%;
  height: 99%;
}

.marker:hover {
  border-bottom: 2px solid #000;
}

let line = document.querySelector(".slider .nowrap"),
  marker = document.querySelector(".markers"),
  markers = marker.querySelectorAll(".marker");

markers.forEach(function (mark) {
  mark.onmousemove = function () {
    let data = this.dataset.position;
    line.style.left = `${data}px`;
  };
});