Как задать проверку в цикле?

<div class="slider-container">
  <div class="slider-item">
    <div class="slider-number">1/3</div>
    <img src="https://сезоны-года.рф/sites/default/files/images/shkolnikam/gora_2.jpg">
    <div class="slider-text">Горы</div>
  </div>
  <div class="slider-item">
    <div class="slider-number">2/3</div>
    <img src="https://lovingnewyork.com.br/wp-content/uploads/2015/10/brooklyn-bridge-park.jpg">
    <div class="slider-text">Мост</div>
  </div>
  <div class="slider-item">
    <div class="slider-number">3/3</div>
    <img src="http://fotorelax.ru/wp-content/uploads/2017/11/Sunset-in-Greenland-01.jpg">
    <div class="slider-text">Закат</div>
  </div>
  <a class="prev" data-change="-1">&#10094;</a>
  <a class="next" data-change="+1">&#10095;</a>
  <div class="dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

body {
  background-color: #232323;
  color: #fff;
  margin-top: 50px;
}

.slider-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
}
  
.slider-item {
  display: none;
}

.slider-item.slider-active {
  display: block;
}

.slider-item img {
  width: 100%;
}

.prev,
.next {
  position: absolute;
  cursor: pointer;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: .6s;
  border-radius: 0 3px 3px 0;
}
    
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0,0,0,0.8);
}

.slider-text {
  position: absolute;
  padding: 8px 12px;
  font-size: 16px;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-number {
  position: absolute;
  top: 30px;
  left: 30px;
}

.dots {
  text-align: center;
}

.dot {
  cursor: pointer;
  width: 13px;
  height: 13px;
  margin: 15px 2px;
  border-radius: 50%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

const slider = document.querySelector('.slider-container');
const sliderItems = document.querySelectorAll('.slider-item');
const dots = [...document.querySelectorAll('.dot')];
let slideIndex = null;

slider.addEventListener('click', function({ target: t }) {
  if (t.matches('[data-change]')) {
    setActiveSlide(slideIndex + +t.dataset.change);
  } else if (t.matches('.dot')) {
    setActiveSlide(dots.indexOf(t));
  }
});

setActiveSlide(0);

function setActiveSlide(index) {
  slider.querySelectorAll('.slider-active').forEach(n => n.classList.remove('slider-active'));
  slider.querySelectorAll('.active').forEach(n => n.classList.remove('active'));

  slideIndex = (index >= 0 ? 0 : sliderItems.length) + (index % sliderItems.length);

  sliderItems[slideIndex].classList.add('slider-active');
  dots[slideIndex].classList.add('active');
}