在单击按钮之前，Javascript幻灯片演示不会显示第一个数组

Question

My slideshow works great except when the page loads initially. I've set my CSS to "display:none" to begin with, then the Javascript loops through the images to display them as inline-blocks when the next button is clicked. But, the first image displays as "none" to start out.

I'm sure there's a way to just display the first image while keeping all the images after hidden. I'm pretty new to this.

I followed along a tutorial on w3schools.com here: https://www.w3schools.com/howto/howto_js_slideshow.asp

You can see my full code and the product on my codepen: https://codepen.io/catherinehh/pen/orpeJV

CSS:

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.slideImg {
 display: none;
}

JAVASCRIPT:

var slideIndex = 1;

function nextSlide(n){
 showSlides(slideIndex += n);
}

function currentSlide(n){
 showSlides(slideIndex = n);
}

function showSlides(n){
  var i;
  var slides = document.getElementsByClassName("slideImg");
  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 = "inline-block";
}

I've basically followed the tutorial on w3schools.com line by line, and I can't find where my code differs from the tutorial. It should run just like the slideshow on that page.

Any help is appreciated! Thank you!

Answer 1

You have forgotten to initialize the slider by calling showSlides(slideIndex)

 var slideIndex = 1; function nextSlide(n){ showSlides(slideIndex += n); } function currentSlide(n){ showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = document.getElementsByClassName("slideImg"); 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 = "inline-block"; } showSlides(slideIndex) 

 .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Hide the images by default */ .slideImg { display: none; } 

 <div class="wrapper"> <header> <h1>Catherine Hill Hyman</h1> <p>Professional Creations</p> </header> <main> <section class="designSection"> <h2>Design</h2> </section> <section class="developmentSection"> <h2>Web Development</h2> </section> <section class="photoSection"> <h2>Photography</h2> <!-- begin photo slideshow--> <div class="photoSlideshow"> <button name="prevButt" onclick="nextSlide(-1)">&#10094;</button> <div class="slideImg"> <img id="uncleBud" src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/58378586_10157043937729774_1705977854832934912_n.jpg?_nc_cat=111&_nc_oc=AQl-LK_lpsqPa3rT2zTbc5KJpNNZECz9jxm15Xk0bNbYjtTklfxf34uVybG2xSjjffA&_nc_ht=scontent.fcae1-1.fna&oh=c5b64ef84d76c6d7ef2a9b9409e12637&oe=5DBFF07F" alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px"> </div> <div class="slideImg"> <img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/61008492_10157093314404774_1267282211523002368_o.jpg?_nc_cat=111&_nc_oc=AQldqecidxJd5LhQsCrYpnGnQ3mmLDqqMe9OGcChpmZyP82vSw7oBZvBDCZfbYktIGQ&_nc_ht=scontent.fcae1-1.fna&oh=c57a3d3827f6cab302470ec0e697f7ed&oe=5D88E446" alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px"> </div> <div class="slideImg"> <img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/59285770_10157043934564774_1801122100677705728_n.jpg?_nc_cat=107&_nc_oc=AQlfwDfzSUayQL0nmF9apZnwLzQJtIZw3KsWx2mM5P0O1x2q508-vo4lsCD6EfUD9ik&_nc_ht=scontent.fcae1-1.fna&oh=4948f8ea74480440b542e60d119e23a9&oe=5D7E8C45" alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px"> </div> <button name="nextButt" onclick="nextSlide(1)">&#10095;</button> <script src="slideShow.js"></script> </div> <!-- end photo slideshow--> </section> <section class="writingSection"> <h2>Writing</h2> </section> </main> 

Answer 2

If you want the slider to start working on page load, so you can call the first slide at the end of above codes:

showSlides(slideIndex);

For more confident (as I dont know where do you put the script in your page if in Header or after the Body tag) you can use <body onload="showSlides(1)"> to postpone the slider function after complete page load.

If you want to show the first image initially and start the slider on click, so use the CSS rule to exclude the first image of being hidden:

.slideImg:first-of-type {
 display: block;
}