Кнопки управления в слайд-шоу изображений не работают

Question

Итак, я сделал слайд-шоу для своего веб-сайта с иллюстрациями, и одно из них волшебным образом не работает.

Я не мог этого понять. Я надеюсь, что смогу использовать вашу помощь

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

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

.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}


.mySlides {
  display: none;
}


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 700px;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.prev1, .next1 {
    cursor: pointer;
    position: absolute;
    top: 300px;
    width: auto;
    margin-top: -22px;
    padding: 7px;
    color: red;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

    .next1 {
        right: 195px;
        border-radius: 3px 0 0 3px;
      }
      .prev1 {
          left: 180px;
      }


      .prev1:hover, .next1:hover {
        background-color: rgba(0,0,0,0.8);
      }
.prev2, .next2 {
    cursor: pointer;
    position: absolute;
    bottom: 1244px;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next2 {
    left: 590px;
    border-radius: 3px 0 0 3px;
  }
  .prev2 {
      left: 530px;
  }


  .prev2:hover, .next2:hover {
    background-color: rgba(0,0,0,0.8);
  }

.mySlides2{
  z-index: 100
}

Проблема с «mySlides2».

Кнопка «Предыдущая» и «Предыдущая» не работает. Во всех остальных это так. Я проверил каждый путь. Через css, html js и chrome консоль. Кажется, ничего не всплывает, поэтому мне пришлось go здесь.

Если вы можете мне помочь, я действительно это ценю.

Answer 1

Это потому, что вы на самом деле не можете нажимать на кнопки «Вперед» и «Предыдущая», что-то скрывает их (вы можете щелкнуть правой кнопкой мыши, чтобы просмотреть элемент на следующей или на вашей кнопке «Предыдущая», вы увидите, что на ней сверху) .

Решением было бы изменить z-index ваших элементов управления на более высокое значение, чтобы у вас был доступ к ним.

.prev1, .next1{
  z-index: 10;
}

---

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

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

.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}


.mySlides {
  display: none;
}


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 700px;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.prev1, .next1 {
    cursor: pointer;
    position: absolute;
    top: 300px;
    width: auto;
    margin-top: -22px;
    padding: 7px;
    color: red;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

    .next1 {
        right: 195px;
        border-radius: 3px 0 0 3px;
      }
      .prev1 {
          left: 180px;
      }


      .prev1:hover, .next1:hover {
        background-color: rgba(0,0,0,0.8);
      }
.prev2, .next2 {
    cursor: pointer;
    position: absolute;
    bottom: 1244px;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next2 {
    left: 590px;
    border-radius: 3px 0 0 3px;
  }
  .prev2 {
      left: 530px;
  }


  .prev2:hover, .next2:hover {
    background-color: rgba(0,0,0,0.8);
  }

.prev1, .next1{
  z-index: 10;
}