如何实现滑块？

var sections = document.querySelectorAll('.section');
var slides = document.querySelectorAll('img');

// запоминается последний активный индикатор.
// нужно для того, что бы при убирании курсора 
// за слайдер, он не "гаснул".
var lastIndicator = sections[0].firstElementChild;

sections.forEach(section => {
  section.addEventListener('mouseenter', mouseEnterHandler);
  section.addEventListener('mouseleave', mouseLeaveHandler);
})

function mouseEnterHandler(e) {
  lastIndicator.classList.remove('indicator_full');
  e.target.firstElementChild.classList.add('indicator_full');
  changeSlide(e.target);
}

function mouseLeaveHandler(e) {
  lastIndicator = e.target.firstElementChild;
}

function changeSlide(section) {
  slides.forEach(slide => {
    if (section.dataset.for == slide.id)
      slide.classList.remove('hidden');
    else
      slide.classList.add('hidden');
  })
}

body {
  margin: 0;
}

.slider {
  height: 100vh;
  display: flex;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: 1s;
}

.section {
  flex-grow: 1;
  margin: 1.5rem;
  display: flex;
  align-items: flex-end;
}

.indicator {
  width: 100%;
  height: 15px;
  background-color: black;
  transition: 0.3s;
  opacity: 0.5;
  border-radius: 2px;
}

.indicator_full {
  background-color: white;
}

.hidden {
  opacity: 0;
}

<div class="slider">
  <img src="https://images.unsplash.com/photo-1568438350562-2cae6d394ad0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="texture-1" id="bg-1">

  <img src="https://images.unsplash.com/photo-1569742676615-3cbdc18ce09e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="texture-2" class="hidden" id="bg-2">

  <img src="https://images.unsplash.com/photo-1570342457319-f17b8f92df09?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="texture-3" class="hidden" id="bg-3">

  <img src="https://images.unsplash.com/photo-1568781270237-f7e90fad3d2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="texture-4" class="hidden" id="bg-4">

  <div class="section" data-for="bg-1">
    <div class="indicator indicator_full"></div>
  </div>
  <div class="section" data-for="bg-2">
    <div class="indicator"></div>
  </div>
  <div class="section" data-for="bg-3">
    <div class="indicator"></div>
  </div>
  <div class="section" data-for="bg-4">
    <div class="indicator"></div>
  </div>
</div>