Ajuste tu código un poco y lo logre, puedes dejar tu función showSlides() si quieres también, pero puedes mejorarla:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var slideIndex = 0;
    showSlides();

    function showSlides() {
      slideIndex++;
      var slides = document.getElementsByClassName("mySlides");
      for (i = 0; i < slides.length; i++)
        slides[i].style.display = "none";
      if(slideIndex > slides.length - 1)
        slideIndex = 0;
      slides[slideIndex].style.display = "block";
      setTimeout(showSlides,2000);
    }

    function plusSlides(pos){
      var slides = document.getElementsByClassName("mySlides");
      slideIndex += pos;
      for (i = 0; i < slides.length; i++)
        slides[i].style.display = "none";
      if(slideIndex > slides.length - 1) 
        slideIndex = 0;
      if(slideIndex < 0)
        slideIndex = slides.length - 1;
      slides[slideIndex].style.display = "block";
    }

<!-- language: lang-css -->

    *{box-sizing:border-box}

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

    .mySlides{
     display:none;
    }

    .prev, .next{
     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;
    }

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

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

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

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

    .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}
    }

<!-- language: lang-html -->

    <div class="slideshow-container">
      <div class="mySlides fade">
           <div class="numbertext">1 / 3</div>
           <img src="http://st2.depositphotos.com/2511967/11135/i/950/depositphotos_111358942-stock-photo-closeup-pixels-of-lcd-tv.jpg" style="width:100%">
           <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
           <div class="numbertext">2 / 3</div>
           <img src="http://www.proandroid.com/wp-content/uploads/2017/11/test-resistencia-google-pixel-2-xl.png" style="width:100%">
           <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
           <div class="numbertext">3 / 3</div>
           <img src="http://st4.depositphotos.com/1010314/19772/i/1600/depositphotos_197725756-stock-photo-test-pattern-color-television-lines.jpg" style="width:100%">
           <div class="text">Caption Three</div>
    </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>

<!-- end snippet -->