slide

<div class="main">
  <div class="slides-wrapper">
    <div class="prev hide"><</div>
    <div class="slides-box">
      <ul class="slides">
        <li class="slide">
          <div class="image" style="background-color:aquamarine;">1</div>
        </li>
        <li class="slide">
          <div class="image" style="background-color:cornflowerblue;">2</div>
        </li>
        <li class="slide">
          <div class="image" style="background-color:mediumpurple;">3</div>
        </li>
        <li class="slide">
          <div class="image" style="background-color:indianred;">4</div>
        </li>
        <li class="slide">
          <div class="image" style="background-color:plum;">5</div>
        </li>
      </ul>
      <div class="slide__nav">
        <span class="bullet dark"></span>
        <span class="bullet"></span>
        <span class="bullet"></span>
        <span class="bullet"></span>
        <span class="bullet"></span>
      </div>
    </div>
    <div class="next">></div>
  </div>
</div>

const prev = document.querySelector('.prev'),
  next = document.querySelector('.next'),
  slides = document.querySelector('.slides'),
  bullets = document.querySelectorAll('.bullet')

let currentIdx = 0;

const moveSlide = (idx) => {
  if (idx > -1 & idx < 5) {
    if (idx === 0){
      prev.classList.add('hide')
    } else {
      prev.classList.remove('hide')
    }
    if (idx === 4){
      next.classList.add('hide')
    } else {
      next.classList.remove('hide')
    }
    bullets[currentIdx].classList.remove('dark')
    bullets[idx].classList.add('dark')
    currentIdx = idx
    slides.style.left = `${-500*idx}px`
  }
}

prev.addEventListener('click', ()=>moveSlide(currentIdx-1))
next.addEventListener('click', ()=>moveSlide(currentIdx+1))
bullets.forEach((bullet,idx) => {
  bullet.addEventListener('mouseover', ()=> moveSlide(idx))
})

.slides-wrapper {
  display:flex;
  justify-content: center;
  align-items:center;
}

.arrow {
  width : 50px;
}

.prev, .next {
  font-size: 60px;
  cursor: pointer;
  color: rosybrown;
}

.slides-box {
  width: 500px;
  height: 300px;
  overflow:hidden;
}

.slides {
  display:flex;
  position:relative;
  list-style: none;
  left: 0;
  margin: 0;
  padding-left:0px;
  transition: left 1s;
}

.image {
  display:flex;
  width: 500px;
  height: 300px;
  align-items:center;
  justify-content:center;
  font-size: 50px;
}
.slide__nav {
  display:flex;
  width:140px;
  height: 10px;
  position: relative;
  bottom:30px;
  left:50%;
  margin-left:-70px;
}
.bullet {
  width: 20px;
  background-color : rgba(0,0,0,0.2);
  margin-right: 10px;
  cursor:pointer;
}
.bullet.dark {
  background-color : rgba(0,0,0,0.6)
}
.bullet:last-child {
  margin-right:0px;
}
.hide {
  visibility: hidden;
}