슬라이드 쇼가 작동하지 않음

동일한 요소가있는 div를 복사하고 클래스 이름 만 남겨두면 슬라이드 쇼가 하나만 나타나는 것이 합리적이지만 두 이미지 세트를 재생하는 슬라이드 쇼 여야합니다 (또는 세트가 동일한 경우 복제). 다소 간단한 수정입니다. 먼저 두 번째 이미지 세트의 클래스 이름을 변경하여 HTML이 다음과 같도록합니다.

<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>

<div class="slideshow-container">
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg">
</div>

그런 다음 기본적으로 하나의 슬라이드 쇼에 필요한 코드를 두 배로 늘리고 두 번째 이미지 세트에 클래스를 사용하도록 설정할 수 있습니다. 머릿속으로 그림을 그리는 것은 어려울 수 있지만 여기에서 볼 수 있습니다.

var xIndex = 0, yIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var y = document.getElementsByClassName("mySlides2");

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

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

  xIndex++;
  if (xIndex > x.length) {xIndex = 1}    
  x[xIndex-1].style.display = "block";  

  yIndex++;
  if(yIndex > y.length) {yIndex = 1}
  y[yIndex-1].style.display = "block";

  setTimeout(carousel, 1000);
}

yIndex 변수를 만들고 .mySlides2요소에 y를 사용했습니다 (대신 mySlides). x 대신 y에 대해 특별히 루프를 두 배로 늘리고 xIndex와 동일한 방식으로 yIndex를 증가 시켰습니다 (최대 이미지 수를 초과하는 경우 1로 설정하고 표시 할 다음 이미지를 설정하는 것과 동일).

다음은 작동하는 Fiddle입니다 (음, 어떤 의미에서는 이미지가 모두 깨졌지만 스크립트는 작동합니다) : https://jsfiddle.net/cchvncnd/