Easy working slideshow, but I don't get it, please help!

#1

Hi, please help!

This is the code for a manual slideshow, it’s working but I wanted to stop at the last img/div, but I don’t undestand the javascript code, (I’m suppose to know this), please, anybody can you explain it to me!!!
(I cleaned the code to be easy to followed)

<div class="slideshow-container">
          <div class="mySlides fade">
                         <img src="img_nature_wide.jpg" style="width:100%">
                     </div>
 
         <div class="mySlides fade">
                         <img src="img_snow_wide.jpg" style="width:100%">
                     </div>
 
         <div class="mySlides fade">
                        <img src="img_mountains_wide.jpg" style="width:100%">
                    </div>
 
         <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
         <a class="next" onclick="plusSlides(1)">&#10095;</a>
      </div>
  
 //Arrows
 <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 <a class="next" onclick="plusSlides(1)">&#10095;</a>
 
 <script>
         var slideIndex = 1;
         showSlides(slideIndex);
 
         function plusSlides(n) {
             showSlides(slideIndex = slideIndex + n);
         }
 
         function currentSlide(n) {
             showSlides(slideIndex = n);
         }
 
         function showSlides(n) {
             var slides = document.getElementsByClassName("mySlides");
             if (n > 3) {
                 slideIndex = 1
             }
             if (n < 1) {
                 slideIndex = 3
             }
             slides[0].style.display = "none";
             slides[1].style.display = "none";
             slides[2].style.display = "none";
             slides[slideIndex - 1].style.display = "block";
         }
 
 </script>
#2

If you need to see it:
Working Slideshow (manual)

#3

I made a couple of comments to your code above. I think that will accomplish what you are attempting. There are other ways to do it, if that doesn’t work for you. By changing those values, you are basically setting 3 as the upper limit and 1 as the lower limit. The way it is now if you try to go past 3 it cycles back to 1. If you go below 1 it cycles back to 3. If you change the values as I’ve suggested, trying to go past 3 will just remain at 3, and trying to go below 1 will remain at 1.

2 Likes
#4

Thank you for your help!!!
I’m almost done with the JavaScript course. :grinning:

1 Like