javascript не выбирается правильное изображение из индекса

Question

Я все еще изучаю html / css и ничего не знаю о javascript. Я скопировал сценарий из inte rnet, чтобы использовать его для галереи изображений. Сценарий для продвижения изображения работает, но сценарий, который выбирает изображение из индекса, выбирает неправильное изображение. Любая помощь была бы замечательной. Спасибо

Это действительно объем моего вопроса, но меня просят ввести более подробную информацию. Еще раз спасибо

codepen

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

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("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

* *::before *::after {
  box-sizing: border-box;
  margin: 0;
}

html { 
  background: url(../images/sara-bg-wide.jpg)
  no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  
body {
  color:  #000;
  font-family: Arial, "Helvetica Neue", Helvetica,sans-serif;
  text-align: center;
  margin: 0;
}

button {
  outline: none;
}
  
a:link, a:visited, a:active {
  color: darkolivegreen;
  text-decoration: none;
}

a:hover {
  color: darkolivegreen;
}

.hidden {
  display:none;
}

.cursor {
  cursor: pointer;
}



.container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  }

.top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 90vh;
  background: rgba(255, 255, 255, 0.7);
}

.art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 100vh;
}

.nav-button {
  height: 30px;
  padding: 20px 10px;
}

.left, .right {
  height: 25px;
  width: 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  color: white;
  background-color: darkolivegreen;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.left {
  margin-left: 15px;
}

.art-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-container img {
  width: 85%;
  border: solid 3px darkolivegreen;
  align-self: center;
}

.index-container {
  display: flex;
  flex-direction: column;
  width: 55%;
  min-height: 0;
}

.index {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: auto;
  min-height: 0;
}

.column {
  flex: 1 1 auto;
  max-width: 120px;
  padding: 10px;
}

.column img {
  width: 100%;
  border: solid 3px darkolivegreen;
}

.active,
.demo:hover {
  opacity: .7;
}

Answer 1

Попробуйте изменить функцию currentSlide на:

function currentSlide(n) {
  // Previously:
  // showSlides((slideIndex += n));
  showSlides((slideIndex = n));
}

... или imho более читабельно:

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