Подскажите. Ошибся при добавлении второго слайд-шоу

Пробую сделать сайт с двумя слайд-шоу с управлением стрелками. Но не могу настроить стрелки на втором слайд-шоу. Где-то ошибся. Помогите найти. С одним все нормально.

<div class="container5">
               <div class="mySlides">
     
                   <img src="/assets/img/kor1.jpg" style="width:100%">
               </div>
               
               <div class="mySlides">
                 
                   <img src="/assets/img/kor2.jpg" style="width:100%">
               </div>
               
               <div class="mySlides">
                 
                   <img src="/assets/img/kor3.jpg" style="width:100%">
               </div>
               
               <div class="mySlides">
                 
                   <img src="/assets/img/kor4.jpg" style="width:100%">
               </div>
               
               <div class="mySlides">
                 
                   <img src="/assets/img/kor5.jpg" style="width:100%">
               </div>
               
               <div class="mySlides">
                 
                   <img src="/assets/img/kor6.jpg" style="width:100%">
               </div>
               <div class="mySlides">
                   
                     <img src="/assets/img/kor7.jpg" style="width:100%">
                 </div>
               
                 <div class="mySlides">
                   
                     <img src="/assets/img/kor8.jpg" style="width:100%">
                 </div>
               
                 <div class="mySlides">
                   
                     <img src="/assets/img/kor9.jpg" style="width:100%">
                 </div>
               
                 <div class="mySlides">
                   
                     <img src="/assets/img/kor10.jpg" style="width:100%">
                 </div>
               
                 <div class="mySlides">
                   
                     <img src="/assets/img/kor11.jpg" style="width:100%">
                 </div>
               
               <!-- Next and previous buttons -->
               <a class="prev" onclick="plusSlides(-1)">❮</a>
               <a class="next" onclick="plusSlides(1)">❯</a>
               
               
               
               <!-- Thumbnail images -->
               <div class="row">
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor1.jpg" style="width:100%" onclick="currentSlide(1)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor2.jpg" style="width:100%" onclick="currentSlide(2)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor3.jpg" style="width:100%" onclick="currentSlide(3)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor4.jpg" style="width:100%" onclick="currentSlide(4)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor5.jpg" style="width:100%" onclick="currentSlide(5)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor6.jpg" style="width:100%" onclick="currentSlide(6)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor7.jpg" style="width:100%" onclick="currentSlide(7)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor8.jpg" style="width:100%" onclick="currentSlide(8)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor9.jpg" style="width:100%" onclick="currentSlide(9)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor10.jpg" style="width:100%" onclick="currentSlide(10)">
                 </div>
                 <div class="column">
                   <img class="demo cursor" src="/assets/img/kor11.jpg" style="width:100%" onclick="currentSlide(11)" >
                 </div>
               </div>
           </div>
           
           <script>
           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.rерlасе(" active", "");
             }
             slides[slideIndex-1].style.display = "block";
             dots[slideIndex-1].className += " active";
             captionText.innerHTML = dots[slideIndex-1].alt;
           }
           </script>



 
 

   <div class="container6">
       <div class="mySlides1">

           <img src="/assets/img/por1.jpg" style="width:100%">
       </div>
       
       <div class="mySlides1">
         
           <img src="/assets/img/por2.jpg" style="width:100%">
       </div>
       
       <div class="mySlides1">
         
           <img src="/assets/img/por3.jpg" style="width:100%">
       </div>
       
       <div class="mySlides1">
         
           <img src="/assets/img/por4.jpg" style="width:100%">
       </div>
       
       <div class="mySlides1">
         
           <img src="/assets/img/por5.jpg" style="width:100%">
       </div>
       
       <div class="mySlides1">
         
           <img src="/assets/img/por6.jpg" style="width:100%">
       </div>
       <div class="mySlides1">
           
             <img src="/assets/img/por7.jpg" style="width:100%">
         </div>
       
         <div class="mySlides1">
           
             <img src="/assets/img/por8.jpg" style="width:100%">
         </div>
       
         <div class="mySlides1">
           
             <img src="/assets/img/por9.jpg" style="width:100%">
         </div>
       
         <div class="mySlides1">
           
             <img src="/assets/img/por10.jpg" style="width:100%">
         </div>
       
         <div class="mySlides1">
           
             <img src="/assets/img/por11.jpg" style="width:100%">
         </div>
       
       <!-- Next and previous buttons -->
       <a class="prev" onclick="plusSlides1(-1)">❮</a>
       <a class="next" onclick="plusSlides1(1)">❯</a>
       
     
       
       <!-- Thumbnail images -->
       <div class="row">
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por1.jpg" style="width:100%" onclick="currentSlide1(1)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por2.jpg" style="width:100%" onclick="currentSlide1(2)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por3.jpg" style="width:100%" onclick="currentSlide1(3)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por4.jpg" style="width:100%" onclick="currentSlide1(4)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por5.jpg" style="width:100%" onclick="currentSlide1(5)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por6.jpg" style="width:100%" onclick="currentSlide1(6)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por7.jpg" style="width:100%" onclick="currentSlide1(7)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por8.jpg" style="width:100%" onclick="currentSlide1(8)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por9.jpg" style="width:100%" onclick="currentSlide1(9)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por10.jpg" style="width:100%" onclick="currentSlide1(10)">
         </div>
         <div class="column">
           <img class="demo1 cursor" src="/assets/img/por11.jpg" style="width:100%" onclick="currentSlide1(11)" >
         </div>
       </div>
   </div>
   <script>
       var slideIndex1 = 1;
       showSlides1(slideIndex1);
       
       function plusSlides1(n) {
         showSlides1(slideIndex1 += n);
       }
       
       function currentSlide1(n) {
         showSlides1(slideIndex1 = n);
       }
       
       function showSlides1(n) {
         var i1;
         var slides1 = document.getElementsByClassName("mySlides1");
         var dots1 = document.getElementsByClassName("demo1");
         var captionText1 = document.getElementById("caption1");
         if (n > slides.length1) {slideIndex1 = 1}
         if (n < 1) {slideIndex1 = slides.length1}
         for (i1 = 0; i1 < slides.length1; i1++) {
             slides1[i1].style.display1 = "none1";
         }
         for (i1 = 0; i < dots.length; i1++) {
             dots[i1].className = dots[i1].className.rерlасе(" active1", "");
         }
         slides1[slideIndex1-1].style.display1 = "block1";
         dots1[slideIndex1-1].className += " active1";
         captionText1.innerHTML = dots[slideIndex1-1].alt;
       }
       </script>


Ответы (0 шт):