Как добавить более 2 слайд-шоу в код W3?

Question

Я использовал код w3 для вставки нескольких слайд-шоу на одной странице (https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_two)

Я пытался добавить третье слайд-шоу, но оно не работало вообще. Я что-то упустил с функцией (showSlides) и я был бы признателен за вашу помощь в этом.

вот код:

html:

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="./assets/man001.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man002.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man003.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="./assets/man004.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/2.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/man006.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
</div>

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides3">
    <img src="./assets/j1.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j2.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j3.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
</div>

и вот js:

var slideIndex = [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";  
}

Я новичок, поэтому я очень борюсь с этим. Большое спасибо за помощь!

Answer 1

Вам необходимо добавить еще один элемент в массив slideIndex, а другой - в массив slideId и вызвать другой showDivs (1, 2);И в вашем HTML вы должны использовать onclick = "plusDivs (-1, 2)" и onclick = "plusDivs (1, 2)" для третьей группы кнопок.Я считаю это крайне неэффективным.

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

function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function showDivs(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";  
}

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button>
</div>

<div class="w3-content w3-display-container">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_la.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_ny.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_chicago.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">&#10095;</button>
</div>


<div class="w3-content w3-display-container">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 2)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 2)">&#10095;</button>
</div>

Еще лучший способ сделать это заключается в следующем:

Прочтите комментарии в JavaScript

var slideIndex;


// the array of all containers
let containers = Array.from(document.querySelectorAll(".w3-display-container"));

// for each conteiner
containers.forEach(c =>{
  // get the array of images in this container
  let images = Array.from(c.querySelectorAll(".mySlides"));
  //the left button for this container
  let left = c.querySelector(".w3-display-left");
  //the right button for this container
  let right = c.querySelector(".w3-display-right");
  
  slideIndex = 0;//set the first slide
  plusDivs(0,images);
  
  
  // events for the this left and right buttons
  left.addEventListener("click", ()=>{plusDivs(-1,images)})
  right.addEventListener("click", ()=>{plusDivs(1,images)})
})


function showDivs(x) {                    
  if (slideIndex > x.length-1) {slideIndex = 0}    
  if (slideIndex < 0) {slideIndex = x.length-1}
  
  //All the slides are display="none"
  for (let i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  // the current slide is display = "block";
  x[slideIndex].style.display = "block";  

}

function plusDivs(n,x) { 
  // increment the value for the slideIndex and show the slide
  slideIndex += n;
  showDivs(x);
}

<h2>Manual Slideshow</h2>

<div class="w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <button class="w3-display-left" >&#10094;</button>
  <button class="w3-display-right" >&#10095;</button>
</div>

<div class="w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_la.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_ny.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_chicago.jpg" style="width:100%">
  <button class="w3-display-left">&#10094;</button>
  <button class="w3-display-right">&#10095;</button>
</div>


<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  
  <button class="w3-display-left">&#10094;</button>
  <button class="w3-display-right">&#10095;</button>
</div>

Answer 2

Я давно не использовал w3.js, но в этом коде у них есть изображения, помеченные классом mySlides1, в то время как вы создали div class="mySlides1" и добавили изображения внутри них, попробуйте добавить классы всами изображения и удалите div, а также - добавьте контейнер div, как в примере кода

Кроме того, чтобы проверить, ничего не пропало, скопируйте точный код и посмотрите, работает ли он, скопируйтете, которые работают и вставляют их, изменяя класс с mySlides2 на mySlides3

В-третьих: это то, что я сделал, чтобы это работало: я добавил третий [1] в slideIndex, так как есть 3слайды это:

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