https://i.sstatic.net/qKwbP.jpgI am experiencing an issue with my two changing image galleries placed side by side. The right image gallery is functioning properly and switching slides, but the left one seems to be stuck on the first slide. I sourced the code from W3.CSS, modified the classes "changing-photo-right" and "changing-photo-left" to my own custom class (available in my CSS stylesheet), and excluded the link to the W3.css stylesheet.
.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>