title: First slide in HTML Slider not displaying upon initial page load
body: <p>So I have an HTML slider template that I followed from W3 Schools, I followed the template to put a slideshow on a Facebook page my company manages using raw HTML. My issue, is that when the page is first loaded, the first slide does not display at all. It is not until the user continues to the next slide that the image loads.
  I have compared my code to the original, and there should be nothing wrong, as I literally just used the template and changed a few text/button colors.
  <br />
  <br />
  Here is the template I followed: <a href="https://www.w3schools.com/howto/howto_js_slideshow.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_slideshow.asp</a>
  <br />
  <br />
  Here is the code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Woobox Digital Deals Slider&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;script&gt;
      var slideIndex = 1;
  showSlides(slideIndex);
  
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n &gt; slides.length) {slideIndex = 1} 
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active";
  }
  
  &lt;/script&gt;
  
  &lt;style&gt;
  * {box-sizing:border-box}
  
  /* Slideshow container */
  .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
  }
  
  .mySlides {
      display: none;
  }
  
  /* Next &amp; previous buttons */
  .prev, .next {
      background-color: rgba(0,0,0,0.65);
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Heading Text */
  #slideshow-heading {
      color: rgba(222,42,0,1.00); /*Primary site color goes here*/
      font-size: 18px;
      text-align: center;
      padding: 20px 10px 20px 10px
  }
  
  /*Comment styling*/ 
  .text {
          visibility: hidden;
      }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #000000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor:pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  &lt;/style&gt;
  
  
  &lt;div&gt;
      &lt;p id="slideshow-heading"&gt;
          Click or Tap image to print
      &lt;/p&gt;
  &lt;/div&gt;
   &lt;div class="slideshow-container"&gt;
    &lt;div class="mySlides fade"&gt;
      &lt;a href="google.com" target="_blank"&gt;
          &lt;img src="http://www.shoppingindanville.com/wp-content/uploads/2017/06/Artboard-19.jpg" style="width:100%;height:auto;"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides fade"&gt;
      &lt;img src="http://www.shoppingindanville.com/wp-content/uploads/2017/06/Artboard-18.jpg" style="width:100%;height:auto;"&gt;
    &lt;/div&gt;
  
    &lt;div class="mySlides fade"&gt;
      &lt;img src="http://www.shoppingindanville.com/wp-content/uploads/2017/06/Artboard-17.jpg" style="width:100%;height:auto;"&gt;
    &lt;/div&gt;
  
    &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
    &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><br />
  Thanks to @Zerone for explaining to me why my code was not working. I did not realize that as the page was loaded, it executed the code is sequential order. This helps expand my understanding of how HTML behaves, thank you again Zerone!</p>