Как реализовать слайдер?

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>