Estoy usando este fragmento de código de W3 Schools porque quiero poner una presentación de diapositivas de imágenes en mi proyecto de sitio web. Por alguna razón, cada vez que cargo/recargo la página, parece que acabo de insertar dos imágenes, una arriba y otra abajo (sin cubrirla, pero una en la línea de arriba y otra en la siguiente). Funciona bien después de hacer clic en las flechas, pero no quiero que se muestre así al principio. Hice muy pocos cambios en HTML y CSS (originalmente no había CSS en W3 Schools, pero quería centrarlo) y ningún cambio importante en JavaScript (el único cambio es que alguien me dijo que cierto parte podría moverse y no hacer ninguna diferencia en el código).
PD: en el código a continuación, utilicé imágenes cuadradas que están guardadas en mi computadora, pero para que puedan verlas, las cambié a fotos aleatorias de Pexel ( x , x ). Por alguna razón, no hace el extraño apilamiento de una imagen encima de la otra cosa aquí...
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>
Ocurre cuando agrega la etiqueta <script> en la primera línea del <body> o en el <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>
El mejor lugar para la etiqueta <script> es al final de <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>