previous button causing slideshow to disappear

I've taken a simple w3 Schools slideshow that was edited here by user Sinisake and edited the styles to remove the slide counter and caption, and edited the prev and next buttons to take up half of each side of the slide, with the cursor changing to indicate click.

The only problem is that when you click 'previous' on the first slide, the previousElementSibling is calling up an element that isn't there, and the whole slideshow disappears. I know this is happening because I changed the prev and next position, but I don't know why.

Also, I'm hiding the dots with display: none, but if I remove them from the html and javascript, the slideshow breaks.

I know a bit about CSS and html, but am very new at Javascript, so I appreciate everyone's patience and help.

My code is below, and the page is also hosted here: http://dominicfortunato.com/Template%20Studio%20Site/index-updated-slideshow-2.html

(function() {

  init(); //on page load - show first slide, hidethe rest

  function init() {

    parents = document.getElementsByClassName('slideshow-container');

    for (j = 0; j < parents.length; j++) {
      var slides = parents[j].getElementsByClassName("mySlides");
      var dots = parents[j].getElementsByClassName("dot");
      slides[0].classList.add('active-slide');
      dots[0].classList.add('active');
    }
  }

  dots = document.getElementsByClassName('dot'); //dots functionality

  for (i = 0; i < dots.length; i++) {

    dots[i].onclick = function() {

      slides = this.parentNode.parentNode.getElementsByClassName("mySlides");

      for (j = 0; j < this.parentNode.children.length; j++) {
        this.parentNode.children[j].classList.remove('active');
        slides[j].classList.remove('active-slide');
        if (this.parentNode.children[j] == this) {
          index = j;
        }
      }
      this.classList.add('active');
      slides[index].classList.add('active-slide');

    }
  }
//prev/next functionality
  links = document.querySelectorAll('.slideshow-container a');

  for (i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      current = this.parentNode;

      var slides = current.getElementsByClassName("mySlides");
      var dots = current.getElementsByClassName("dot");
      curr_slide = current.getElementsByClassName('active-slide')[0];
      curr_dot = current.getElementsByClassName('active')[0];
      curr_slide.classList.remove('active-slide');
      curr_dot.classList.remove('active');
      if (this.className == 'next') {

        if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
          curr_slide.nextElementSibling.classList.add('active-slide');
          curr_dot.nextElementSibling.classList.add('active');
        } else {
          slides[0].classList.add('active-slide');
          dots[0].classList.add('active');
        }

      }

      if (this.className == 'prev') {

 	 	if (curr_slide.previousElementSibling.classList.contains('mySli‌des')) {
          curr_slide.previousElementSibling.classList.add('active-slide');
          curr_dot.previousElementSibling.classList.add('active');
        } else {
          slides[slides.length - 1].classList.add('active-slide');
          dots[slides.length - 1].classList.add('active');
        }

      }

    }

  }
})();

 /* Slideshow container */
 
 
.slideshow-container {
  max-width: 80%;
  position: relative;
  padding-top: 3%;
  padding-bottom: 2%;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: url('Images/arrow.png'), w-resize;
  float: left;
  position: absolute;
  width: 50%;
  height: 90%;
  margin-right: auto;
  margin-left: auto;
  transition: 0.3s ease;
  border-radius: 0 0px 0px 0;
}

/* Position the "next button" to the right */
.next {
  cursor: url('Images/arrow.png'), e-resize;
  right: 0;
  border-radius: 0px 0 0 0px;

}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0);
}

.mySlides {
  display:none;
}
.active-slide {
  display:block;
}

.active-slide-1 {
  display:block;
}

.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


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

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

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.text-container {
	z-index: 300;
	max-width: 80%;
	float: center;
	text-align: left;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 2%;
	font-family:"GT Walsheim", Calibri, sans-serif;
}

.project-description {
	width: 100%;
	font-size: 36px;
	margin-left: 20px;
	font-family:"GT Walsheim", Calibri, sans-serif;
	display: inline;
}

.project-title {
	width: 100%;
	display: inline;
	margin-left: 150px;
	text-decoration: underline;
	font-size: 36px; 
}

<div class="slideshow-container">
  <a class="prev" ></a>
  <a class="next"></a>

  <div class="mySlides fade">
    <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://placehold.it/1000x350" style="width:100%">
  </div>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>  
</div>
<div class="text-container">
	<div class="project-title">Rust Belt Riders</div>
	<div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
  </div>

<br>

<div class="slideshow-container">
  <a class="prev" ></a>
  <a class="next"></a>

  <div class="mySlides fade">
    <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="http://placehold.it/1000x350" style="width:100%">
  </div>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>  
</div>
<div class="text-container">
	<div class="project-title">Rust Belt Riders</div>
	<div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
  </div>

<br>

Solution

this works for me: (you may have forgotten a dot in the second slider). Check out this Fiddle: https://jsfiddle.net/prtuxoxx/

<div class="slideshow-container">
        <a class="prev" ></a>
        <a class="next"></a>

        <div class="mySlides fade">
          <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
        </div>

        <div class="mySlides fade">
          <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
        </div>

        <div class="mySlides fade">
          <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
        </div>

        <div class="mySlides fade">
          <img src="http://placehold.it/1000x350" style="width:100%">
        </div>

      <div style="text-align:center">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>  
    </div>
    <div class="text-container">
        <div class="project-title">Rust Belt Riders</div>
        <div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
    </div>

      <br>

    <div class="slideshow-container">
        <a class="prev" ></a>
        <a class="next"></a>

        <div class="mySlides fade">
          <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
        </div>

        <div class="mySlides fade">
          <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
        </div>

        <div class="mySlides fade">
          <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
        </div>

        <div class="mySlides fade">
          <img src="http://placehold.it/1000x350" style="width:100%">
        </div>

      <div style="text-align:center">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>  
    </div>
    <div class="text-container">
        <div class="project-title">Rust Belt Riders</div>
        <div class="project-description">Identity for Rust Belt Riders, a waste management and composting company from Cleveland. </div>
    </div>

and JS:

(function() {

      init(); //on page load - show first slide, hidethe rest

      function init() {

        parents = document.getElementsByClassName('slideshow-container');

        for (j = 0; j < parents.length; j++) {
          var slides = parents[j].getElementsByClassName("mySlides");
          var dots = parents[j].getElementsByClassName("dot");
          slides[0].classList.add('active-slide');
          dots[0].classList.add('active');
        }
      }

      dots = document.getElementsByClassName('dot'); //dots functionality

      for (i = 0; i < dots.length; i++) {

        dots[i].onclick = function() {

          slides = this.parentNode.parentNode.getElementsByClassName("mySlides");

          for (j = 0; j < this.parentNode.children.length; j++) {
            this.parentNode.children[j].classList.remove('active');
            slides[j].classList.remove('active-slide');
            if (this.parentNode.children[j] == this) {
              index = j;
            }
          }
          this.classList.add('active');
          slides[index].classList.add('active-slide');

        }
      }
    //prev/next functionality
      links = document.querySelectorAll('.slideshow-container a');

      for (i = 0; i < links.length; i++) {
        links[i].onclick = function() {
          current = this.parentNode;

          var slides = current.getElementsByClassName("mySlides");
          var dots = current.getElementsByClassName("dot");
          curr_slide = current.getElementsByClassName('active-slide')[0];
          curr_dot = current.getElementsByClassName('active')[0];
          curr_slide.classList.remove('active-slide');
          curr_dot.classList.remove('active');
          if (this.className == 'next') {
            console.log('next ', curr_slide);
            if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
              curr_slide.nextElementSibling.classList.add('active-slide');
              curr_dot.nextElementSibling.classList.add('active');
            } else {
              slides[0].classList.add('active-slide');
              dots[0].classList.add('active');
            }

          }

          if (this.className == 'prev') {
            console.log('previous ', curr_slide);
              if (curr_slide.previousElementSibling.classList.contains('mySlides')) {
                  curr_slide.previousElementSibling.classList.add('active-slide');
                  curr_dot.previousElementSibling.classList.add('active');
                } else {
                    slides[slides.length - 1].classList.add('active-slide');
                 dots[slides.length - 1].classList.add('active');
            }

          }

        }

      }
    })();