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)">❮</a> <a class="next" onclick="plusSlides(1)">❯</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"; }Tal vez olvidó copiar los elementos "puntos" del tutorial. Si obtiene errores en su consola, esta podría ser la razón por la que aborta la ejecución posterior.
Intenta cambiar tu HTML de la siguiente manera:
<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> <div class="dots"></div> <div class="dots"></div> <div class="dots"></div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>Agregué los tres elementos de "puntos". Si no los quiere, puede eliminarlos del HTML, pero debe eliminar todos los códigos JS que funcionan con la variable dots.
Aquí está el código JS sin el manejo de puntos:
function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; }