I created an automatic slideshow, but I realized is not showing all the images I have set up. to be more precise, it's not showing the even numbers

This is what I have in the .js file:

//Automatic Slideshow

 var slidePosition = 1;
SlideShow(slidePosition);

// forward/Back controls
function plusSlides(n) {
  SlideShow(slidePosition += n);
}

//  images controls
function currentSlide(n) {
  SlideShow(slidePosition = n);
}

var slidePosition = 0;
SlideShow();

function SlideShow() {
  var i;
  var slides = document.getElementsByClassName("menuSlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slidePosition++;
  if (slidePosition > slides.length) {slidePosition = 1}  
  slides[slidePosition-1].style.display = "block";
  setTimeout(SlideShow, 4000); // Change image every 4 seconds
} 

This in the .html file:

 <div class="slideshow-container fade"> // this container has 6 more images
                <div class="menuSlides">

                    <div class="MessageInfo">1 / 6</div>
                    <img src="images/menu-appetizers.jpg" alt="Appetizers" style="width:100%">

                </div>

                <!-- Back and forward buttons -->
                <a class="back" onclick="plusSlides(-1)">&#10094;</a>
                <a class="forward" onclick="plusSlides(1)">&#10095;</a>

</div>

<!-- The circles/dots -->
<div style="text-align:center">
     <span class="dots" onclick="currentSlide(1)"></span>
     <span class="dots" onclick="currentSlide(2)"></span>
     <span class="dots" onclick="currentSlide(3)"></span>
     <span class="dots" onclick="currentSlide(4)"></span>
     <span class="dots" onclick="currentSlide(5)"></span>
     <span class="dots" onclick="currentSlide(6)"></span>
</div>  

Please, could anyone help me to find the error? I will appreciate the help. Thanks.