my right image changes slides but the left one is stuck on the first slide

Question

I have created two changing image galleries side by side but my right image changes slides but the left one is stuck on the first slide. does anyone know why? I have found the code on W3.CSS but I changed the class "changing-photo-right" and "changing-photo-left" to one of my own class (which can be found in my css stylesheet) and did not link the style sheet of W3.css.

.section2 {
  background: #F5DAD3;
  display: flex;
  height: 750px; 
  position: relative;
}


.changing-photo-left {
  float: left;
  margin-left: 125px;
  margin-top: -390px;
  position: relative;
  display: block;
}

.changing-photo-right {
  float: right;
  margin-right: 125px;
  margin-top: -390px;
  position: relative;
  display: block;
}



.section3 {
  height: 440px;
  width: 2px; 
  top: 160px;
  left: 50%;
  position: absolute;
  border: 0px solid black;
  background-color: black;
  border-radius: 20px;
}

 <div class="hmm">
            <div class="section2"></div>
            <div class="section3" ></div>
            <div>
                <p class="text-12">The interieur</p>
                <p class="text-11">Discover the lovely interieur that was built since 1948.</p>
                <a class="button-intro-below-left" href="">Click here for more</a>
                <div class="changing-photo-left" style="max-width:500px">
                    <img class="mySlides" src="009.jpg" style="width:100%">
                    <img class="mySlides" src="062.jpg" style="width:100%">
                    <img class="mySlides" src="027.jpg" style="width:100%">
                </div>
                  
                  <script>
                  var myIndex = 0;
                  carousel();
                  
                  function carousel() {
                    var i;
                    var x = document.getElementsByClassName("mySlides");
                    for (i = 0; i < x.length; i++) {
                      x[i].style.display = "none";  
                    }
                    myIndex++;
                    if (myIndex > x.length) {myIndex = 1}    
                    x[myIndex-1].style.display = "block";  
                    setTimeout(carousel, 2500); // Change image every 3 seconds
                  }
                  </script>
            </div>

            <div>
                <p class="text-13">The exterior</p>
                <p class="text-14">Discover the lovely exterior that was built since 1948.</p>
                <a class="button-intro-below-right" href="">Click here for more</a>
                <div class="changing-photo-right" style="max-width:500px">
                    <img class="mySlides1" src="009.jpg" style="width:100%">
                    <img class="mySlides1" src="012.jpg" style="width:100%">
                    <img class="mySlides1" src="013.jpg" style="width:100%">
                </div>

                <script>
                    var myIndex = 0;
                    carousel();
                    
                    function carousel() {
                      var i;
                      var x = document.getElementsByClassName("mySlides1");
                      for (i = 0; i < x.length; i++) {
                        x[i].style.display = "none";  
                      }
                      myIndex++;
                      if (myIndex > x.length) {myIndex = 1}    
                      x[myIndex-1].style.display = "block";  
                      setTimeout(carousel, 2500); // Change image every 3 seconds
                    }
                    </script>

            </div>

Answer 1

You're using the same names for the variables and functions in both of the loops. If you change the names of the variables and functions in the second loop, everything should work just fine.

.section2 {
    background: #F5DAD3;
    display: flex;
    height: 750px; 
    position: relative;
  }
  
  
  .changing-photo-left {
    float: left;
    margin-left: 125px;
    margin-top: -390px;
    position: relative;
    display: block;
  }
  
  .changing-photo-right {
    float: right;
    margin-right: 125px;
    margin-top: -390px;
    position: relative;
    display: block;
  }
  
  
  
  .section3 {
    height: 440px;
    width: 2px; 
    top: 160px;
    left: 50%;
    position: absolute;
    border: 0px solid black;
    background-color: black;
    border-radius: 20px;
  }

    <div class="hmm">
        <div class="section2"></div>
        <div class="section3" ></div>
        <div>
            <p class="text-12">The interieur</p>
            <p class="text-11">Discover the lovely interieur that was built since 1948.</p>
            <a class="button-intro-below-left" href="">Click here for more</a>
            <div class="changing-photo-left" style="max-width:500px">
                <img class="mySlides" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
                <img class="mySlides" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
                <img class="mySlides" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
            </div>
              
              <script>
                var myIndex = 0;
                carousel();
                
                function carousel() {
                  var i;
                  var x = document.getElementsByClassName("mySlides");
                  for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";  
                  }
                  myIndex++;
                  if (myIndex > x.length) {myIndex = 1}    
                  x[myIndex-1].style.display = "block";  
                  setTimeout(carousel, 2500); // Change image every 3 seconds
                }
              </script>
        </div>

        <div>
            <p class="text-13">The exterior</p>
            <p class="text-14">Discover the lovely exterior that was built since 1948.</p>
            <a class="button-intro-below-right" href="">Click here for more</a>
            <div class="changing-photo-right" style="max-width:500px">
                <img class="mySlides1" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
                <img class="mySlides1" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
                <img class="mySlides1" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
            </div>

            <script>
                var myIndex1 = 0;
                carousel1();
                
                function carousel1() {
                  var j;
                  var y = document.getElementsByClassName("mySlides1");
                  for (j = 0; j < y.length; j++) {
                    y[j].style.display = "none";  
                  }
                  myIndex1++;
                  if (myIndex1 > y.length) {myIndex1 = 1}    
                  y[myIndex1-1].style.display = "block";  
                  setTimeout(carousel1, 2500); // Change image every 3 seconds
                }
                </script>

        </div>