проблемы со слайд шоу

Question

Такая проблема: пытаюсь сделать слайд шоу без jQuery и т.п., но скрипт почему то не работает. он с начала не правильно подсвечивал точки (соответствующие номеру слайда), а потом перестал видеть на слайдах style, почему он видит только у некоторых слайдов стили и не правильно точки подсвечивает?

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
};

function currentSlide(n) {
  showSlides(slideIndex = n);
};

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {
    slideIndex = 1;
  }

  if (n < 1) {
    slideIndex = slides.length;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("active", "");
  }

  slides[slideIndex + 1].style.display = "block";
  dots[slideIndex + 1].className += " active";
}

.carusel {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
}

.prev,
.next {
  cursor: pointer;
}

.prev {
  margin-right: 40px;
}

.next {
  margin-left: 40px;
}

.slide {
  width: 835px;
  height: 100%;
}

.dot {
  cursor: pointer;
  width: 14px;
  height: 14px;
  background-color: #D8D8D8;
  border-radius: 50%;
  margin-top: 56px;
  margin-right: 26px;
  display: inline-block;
  transition: all 1s ease;
}

.active,
.dot:hover {
  background: linear-gradient(180deg, #FF5B14 0%, #FF7F47 100%);
  ;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 4;
  }
  to {
    opacity: 1;
  }
}

<div class="carusel">
  <a class="prev" onclick="plusSlides(-1)">&#10094</a>
  <div class="slide fade" style="background: chartreuse;">

  </div>
  <div class="slide fade" style="background: black;">

  </div>
  <div class="slide fade" style="background: red;">

  </div>
  <a class="next" onclick="plusSlides(1)">&#10095</a>
</div>
<div style="text-align: center;">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

Answer 1

надо было просто в конце js поменять slides[slideIndex + 1].style.display = "block"; на slides[slideIndex -1].style.display = "block";, с dots тоже самое

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
};

function currentSlide(n) {
  showSlides(slideIndex = n);
};

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {
    slideIndex = 1;
  }

  if (n < 1) {
    slideIndex = slides.length;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("active", "");
  }

  slides[slideIndex -1].style.display = "block";
  dots[slideIndex -1].className += " active";
}

.carusel {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
}

.prev,
.next {
  cursor: pointer;
}

.prev {
  margin-right: 40px;
}

.next {
  margin-left: 40px;
}

.slide {
  width: 835px;
  height: 100%;
}

.dot {
  cursor: pointer;
  width: 14px;
  height: 14px;
  background-color: #D8D8D8;
  border-radius: 50%;
  margin-top: 56px;
  margin-right: 26px;
  display: inline-block;
  transition: all 1s ease;
}

.active,
.dot:hover {
  background: linear-gradient(180deg, #FF5B14 0%, #FF7F47 100%);
  ;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 4;
  }
  to {
    opacity: 1;
  }
}

<div class="carusel">
  <a class="prev" onclick="plusSlides(-1)">&#10094</a>
  <div class="slide fade" style="background: chartreuse;">

  </div>
  <div class="slide fade" style="background: black;">

  </div>
  <div class="slide fade" style="background: red;">

  </div>
  <a class="next" onclick="plusSlides(1)">&#10095</a>
</div>
<div style="text-align: center;">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

БЛОГ НА HUSL

проблемы со слайд шоу

Ответы (1 шт):