Накидывание классов в обратном порядке [закрыт]

 let sliderImgs = document.querySelectorAll('.slide'), 
     arrowLeft = document.querySelector('#arrow-left'),      
     arrowRight = document.querySelector('#arrow-right'), 
     current = 0; 
 
//Reset Images to "display: none;" 
function reset() { 
  for (let i = 0; i < sliderImgs.length; i++ ) { 
    sliderImgs[i].style.display = 'none'; 
  } 
} 
 
//Init Slide 
function startSlide() { 
  reset() 
  sliderImgs[0].style.display = 'block'; 
} 
 
//show previous 
function slideLeft() { 
  reset(); 
  sliderImgs[current - 1].style.display = 'block'; 
  current--; 
} 
 
//Show Next 
function slideRight() { 
  reset(); 
  sliderImgs[current + 1].style.display = 'block'; 
  current++; 
} 
 
//Left arrow click 
arrowLeft.addEventListener('click', function() { 
  if (current === 0) { 
    current = sliderImgs.length; 
  } 
   
  slideLeft(); 
}) 
 
//right arrow click 
arrowRight.addEventListener('click', function() { 
  if (current === sliderImgs.length - 1) { 
    current = -1; 
  } 
   
  slideRight(); 
}); 
 
//Timed slider 
setInterval(function(){ 
  if (current === sliderImgs.length - 1) { 
    current = -1; 
  } 
   
  slideRight(); 
}, 5000) 
 
startSlide();

*, 
*::before, 
*::after { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body, .width #slider, .slide-content { 
  font-family: Arial, Helvetica, sans-serif; 
  height: 100vh; 
  width: 100%; 
  overflow-x: hidden; 
} 
 
.slide { 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
} 
 
 
.slide1 { 
  background-image: url('https://unsplash.it/536'); 
} 
 
.slide2 { 
  background-image: url('https://unsplash.it/485'); 
} 
 
.slide3 { 
  background-image: url('https://unsplash.it/919'); 
} 
 
.slide-content { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
} 
 
.slide-content span { 
  font-size: 3rem; 
  color: #fff; 
} 
 
.arrow { 
  cursor: pointer; 
  position: absolute; 
  top: 50%; 
  margin-top: -35px; 
  width: 0; 
  height: 0; 
  border-style: solid; 
   
  transition: all .5s ease-out; 
} 
 
#arrow-left { 
  border-width: 30px 40px 30px 0; 
  border-color: transparent #333 transparent transparent; 
  left: 0; 
  margin-left: 30px; 
} 
 
#arrow-right { 
  border-width: 30px 0 30px 40px; 
  border-color: transparent transparent transparent #444; 
  right: 0; 
  margin-right: 30px; 
} 
 
#arrow-right:hover { 
   border-color: #999 transparent #999 #444; 
    box-shadow: 0 0 0 10px #999;  
} 
 
#arrow-left:hover { 
  border-color: #999 #333 #999 transparent; 
    box-shadow: 0 0 0 10px #999;  
}

<div class="wrap"> 
  <div id="arrow-left" class="arrow"></div> 
  <div id="slider"> 
    <div class="slide slide1"> 
      <div class="slide-content"> 
        <span>We are Smooth</span> 
      </div> 
    </div> 
    <div class="slide slide2"> 
      <div class="slide-content"> 
        <span class="content">We are Cool</span> 
      </div> 
    </div> 
    <div class="slide slide3"> 
      <div class="slide-content"> 
        <span class="content">We are Awesome</span> 
      </div> 
    </div> 
  </div> 
  <div id="arrow-right" class="arrow"></div> 
</div>