Soy bastante nuevo en la codificación desde cero, pero estoy tratando de crear un sitio web muy, muy simple. Y quería un carrusel de imágenes al principio. Ya lo tengo codificado // Copié algo de código de un tutorial.

Mi problema es que, cuando abro la página principal de mi sitio web, la primera imagen no se carga, hasta que hago clic hacia adelante o hacia atrás. Y quiero que cargue la imagen 1 tan pronto como se cargue el sitio web. ¿Alguien puede ayudarme con eso?

índice.html

 <div class="slideshow-container"> <div class="mySlides fade"> <img src="images/image1.jpg" style="width:100%"> <div class="text">Text1Here</div> </div> <div class="mySlides fade"> <img src="images/image2.jpg" style="width:100%"> <div class="text">Text2Here</div> </div> <div class="mySlides fade"> <img src="images/image3.jpg" style="width:100%"> <div class="text">Text3Here</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div>

guión.js

 let slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }