Javascript - CSS Slideshow not displaying default image

Question

I am having an issue with CSS slideshow I've implemented into my current passion-project, in which there is no default image being displayed upon load of the web-page. Upon navigation/dot press, images are successfully displayed, but I can't seem to figure out the small code snippet (presumably missing from the Javascript function) that would display the first image on page load. I've attempted to simply add the "active" class to the desired image, but this only makes the 'dot' button appear active with no corresponding image being displayed. Appreciate any assistance

Here's the code:

var slideIndex = 1;



function plusSlides(n) {
  'use strict';
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  'use strict';
  showSlides(slideIndex = n);
}

function showSlides(n) {
  'use strict';
  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";
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}


/* Slideshow container */

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


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  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 see-through background */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/*  */

.transition {
  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,
.transition:hover {
  background-color: #222;
}


/* 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
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<div class="homePage">
  <div class="slideshow-container">

    <div class="mySlides fade">
      <div class="numbertext">1 / 2</div>
      <img src="graphics/logo.jpg" style="width:100%">
      <div class="text"></div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 2</div>

      <img src="graphics/1.jpg" style="width:100%">
      <div class="text"></div>
    </div>


    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>

  <br>

  <div style="text-align:center">

    <span class="transition" onclick="currentSlide(1)"></span>
    <span class="transition" onclick="currentSlide(2)"></span>

    <br>
  </div>

Answer 1

You can give another class to the first image in the slider

<div class="mySlides fade block ">
 <div class="numbertext">1 / 2</div>
  <img src="#" style="width:100%">
  <div class="text"></div>
</div>

Then you give it a display:block

.block {
 display:block;
}

Example : https://jsfiddle.net/1ueun1L1/2/