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.

CodePudding user response：

You are calling SlideShow twice in the main body of your script. This sets off two timers and increments things in steps of two. You should only call SlideShow once when setting up the slideshow.

var slidePosition = 1;
SlideShow(slidePosition);   // get rid of this

// .....

var slidePosition = 0;
SlideShow();                // or get rid of this

The function takes no arguments, so the first call doesn't make much sense.