Utilizing this code snippet from W3 Schools to incorporate an image slideshow into my web project. However, upon page load/reload, the images appear stacked vertically rather than horizontally (one above and one below). The slideshow functions properly after clicking the navigation arrows, but I would prefer it to display correctly from the start. Minimal modifications were made to the HTML and CSS (added centering), with minor adjustments in the JavaScript based on suggestions.
P.S. In the provided code, square images saved locally were replaced with random photos from Pexels for visual demonstration (x, x). Interestingly, the issue of stacking images did not occur here...
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}.mySlides {
display: block;
margin-left: auto;
margin-right: auto;
}
.w3-button {
display: block;
margin-left: 210px;
margin-right: 210px;
}<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://images.pexels.com/photos/965879/pexels-photo-965879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img class="mySlides" src="https://images.pexels.com/photos/570047/pexels-photo-570047.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<button class="w3-button w3-brown w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-brown w3-display-right" onclick="plusDivs(1)">❯</button>