Unable to get property 'style' of undefined or null reference javascript error then I load page

Question

I'm sorry for guys but I'm new to web technologies like HTML, CSS and Javascript. I'm trying to create a slideshow.Then I load my page no image appears in container( My page at first loading ) . If I press arrows,images appears . Then I load my page first time,I get this error at my console window I get this error at my console window. I get the same error in both google chrome v.63 and microsoft edge v.41 .

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("Poze");
  var dots = document.getElementByClassName("demo");
  //var captionText = document.getElementById("caption");
  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";
  //captionText.innerHTML = dots[slideIndex - 1].alt;
}

img {
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  margin-top: 27%;
  border: solid;
}

.Poze {
  display: none;
  border: solid;
  border-color: blue;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border: solid;
  border-radius: 0 3px 3px 0;
  border-color: green;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

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

.row {
  top: 50%;
  border: solid;
  border-color: yellow;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 20%;
  border: solid;
  border-color: red;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

<div class="container">
  <div class="Poze">
    <img src="./imagini/probka.jpg" style="width:60%">
  </div>

  <div class="Poze">
    <img src="./imagini/top.jpg" style="width:60%">
  </div>

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

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="./imagini/probka.jpg" style="width:30%" onclick="currentSlide(1);">
    </div>

    <div class="column">
      <img class="demo cursor" src="./imagini/top.jpg" style="width:30%" onclick="currentSlide(2);">
    </div>
  </div>
  </div