Skip to main content
se añadieron 41 caracteres en el cuerpo
Origen Enlace
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();

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

function plusSlides(pos){
  var slides = document.getElementsByClassName("mySlides");
  slideIndex += pos;
  for if(i = 0; islideIndex <> slides.length;length i++- 1) 
    slides[i].style.displayslideIndex = "none";0;
  if(slideIndex >< 0)
    slideIndex = slides.length - 1) 1;
   for slideIndex(i = 0; i < slides.length; i++){
    if (slideIndexi <== 0slideIndex)
    slideIndex = slidesslides[i].lengthstyle.display -= 1;"block";
  slides[slideIndex]  else
      slides[i].style.display = "block";"none";
  };
}
*{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}
}
<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>
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";
}
*{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}
}
<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>
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();

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

function plusSlides(pos){
  slideIndex += pos;
  if(slideIndex > slides.length - 1) 
    slideIndex = 0;
  if(slideIndex < 0)
    slideIndex = slides.length - 1;
  for (i = 0; i < slides.length; i++){
    if (i == slideIndex)
      slides[i].style.display = "block";
    else
      slides[i].style.display = "none";
  };
}
*{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}
}
<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>
Origen Enlace

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

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";
}
*{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}
}
<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>