두 번째 슬라이드 쇼를 추가 한 후 슬라이드 쇼가 작동하지 않습니다.

내 웹 페이지에 문제가 있습니다. 웹 페이지에 두 번째 슬라이드 쇼를 추가 한 후 첫 번째 슬라이드 쇼가 두 번째 이미지에 멈 춥니 다. 첫 번째는 완벽하게 작동했습니다.

왼쪽 이미지 (첫 번째 슬라이드 쇼)는 두 번째 이미지에 고정되고 오른쪽 이미지 (두 번째 슬라이드 쇼)는 완벽하게 작동합니다. 코드를 확인한 결과 잘못된 것을 찾을 수 없습니다.

아래는 내 코드입니다.

//스타일

<style>
 .Slides1, Slides2{
 display: none;
 }

 img {vertical-align: middle;}

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

  .dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  }

  .active {
  background-color: #717171;
  }

  /* Fading animation */
  .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}
  }
  </style>

// 슬라이드 쇼 1

<!-- Slideshow1 -->
  <div style="display: table-cell; background-color:white">
  <div class="slideshow-container" style="padding-left:120px">

  <div class="Slides1 fade">
  <img src="1.jpg" style="width:65%;">
  <br>
  Home Theatre Systems
  </div>
  <div class="Slides1 fade">  
  <img src="1.2.jpg" style="width:65%">
  <br>
  Automatic Hygiene System
  </div>
  <div class="Slides1 fade">  
  <img src="1.3.jpg" style="width:65%">
  <br>
  Computer Peripherals
  </div>
  <div class="Slides1 fade">  
  <img src="1.4.jpg" style="width:65%">
  <br>
  High End Radio Controlled Products
  </div>
  </div>
  </div>
  <!-- ------------------------------------------------------------------ -->

// 자바 스크립트 1

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("Slides1");
for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none"; 
    }
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1} 
slides[slideIndex-1].style.display = "block"; 
setTimeout(showSlides, 2500); 

  }
 </script>

// 슬라이드 쇼 2

<!-- Slideshow2 -->
  <div style="display: table-cell; background-color:#AED6F1">
  <div class="slideshow-container" style="padding-left:120px">

  <div class="Slides2 fade">
  <img src="2.1.jpg" style="width:65%;">
  <br>
  Home Theatre Systems
  </div>
  <div class="Slides2 fade">  
  <img src="2.2.jpg" style="width:65%">
  <br>
  Automatic Hygiene System
  </div>
  <div class="Slides2 fade">  
  <img src="2.3.jpg" style="width:65%">
  <br>
  Computer Peripherals
  </div>
  <div class="Slides2 fade">  
  <img src="2.4.jpg" style="width:65%">
  <br>
  High End Radio Controlled Products
  </div>
  </div>
  </div>
  <!-- ------------------------------------------------------------------ -->

// 자바 스크립트 2

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("Slides2");
for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none"; 
    }
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1} 
slides[slideIndex-1].style.display = "block"; 
setTimeout(showSlides, 2500); 

  }
</script>