I am using this snippet of code from W3 Schools because I want to put an image slideshow on my website project. For some reason, whenever I load/reload the page, it appears as if I just inserted two images, one above and one below (not covering it, but one on the above line and one on the next line). It works fine after clicking the arrows, but I don't want it to show like that at the start. I have made very few changes to the HTML and CSS (there was originally no CSS for it on W3 Schools, but I wanted to centre it), and no major changes to the JavaScript (the only change is that someone told me that a certain part could be moved and make no difference to the code).
P.S. in the code below, I used square images that are saved onto my computer, but so that you can actually see it, I changed it to random photos from pexel (x, x). For some reason, it doesn't do the weird stacking-one-image-above-the-other thing 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>It happens when you add the <script> tag in the first line of the <body> or in the <head>:
<body>
<script src="javascript.js"></script>
<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>
</div>
</body>
The best place for the <script> tag is the end of <body>:
<body>
<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>
</div>
<script src="javascript.js"></script>
</body>