第一张幻灯片未显示在幻灯片上

Question

我几乎完成了幻灯片的显示，但是在加载页面后，第一个幻灯片没有显示，例如：https://ibb.co/Vpzngx3。单击“下一个”按钮后，该幻灯片运行平稳（将显示第一张幻灯片），但是如果我不单击它，它将显示为空白。

https://codepen.io/taylormdesign/pen/BazONYo

html：

<div class="slide-section">
  <div class="mySlides fade" display:block;>
[elementor-template id="712"]
  </div>
  <div class="mySlides fade">
[elementor-template id="709"]
  </div>
  <div class="mySlides fade">
[elementor-template id="706"]
  </div>
 
  <div class="prevbutton" onclick="plusSlides(-1)"><img src="https://taylorm.design/wp-content/uploads/previous.png"></div>
  
  <div class="nextbutton" onclick="plusSlides(1)"><img src="https://taylorm.design/wp-content/uploads/next.png"></div>
</div>

css：

/* Slideshow container */
.slide-section {
  width: 100vw;
  height: 100vh;
  align-items: center;
  position: absolute;
}

/* Next & previous buttons */
.prevbutton, .nextbutton {
  position: absolute;
  max-height: 3vw;
  max-width: 3vw;
  user-select: none;
  z-index: 5;
}

.mySlides {
  display:none;
}

/* Position the "next button" to the right */
.nextbutton {
  bottom: 8%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -10%) }

.prevbutton {
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -10%) }


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

js：

var 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) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var 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";
}