How can I use JQuery to automate my slideshow?

Question

I'm attempting to automate my slideshow using JQuery but so far have had no luck. Below is a snippit of my HTML. I did not include my CSS as I don't think it's relevant.

HTML

<div class="slideshow-container">
            
              <div id="slideshow" class="mySlides fade">
                <div class="numbertext">1 / 3</div>
                <a href="post003.html"><img src="003.jpg" style="width:100%"></a>
                <div class="text"><a href="003.html">Popular Posts</a></div>
              </div>
            
              <div class="mySlides fade">
                <div class="numbertext">2 / 3</div>
                <img src="002.jpg" style="width:100%">
                <div class="text">New Styles</div>
              </div>
            
              <div class="mySlides fade">
                <div class="numbertext">3 / 3</div>
                <img src="001-main.jpg" style="width:100%">
                <div class="text">Submissions</div>
              </div>
            
              <!-- Next and previous buttons -->
              <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
              <a class="next" onclick="plusSlides(1)">&#10095;</a>
            </div>
            <br>
                      
                      </div>

I've tried multiple different JQuery scripts and nothing seems to work.

Answer 1

Actually, CSS is very important.

There are many ways to solve this. My Solution using your code, is something like that:

 var leftPosition = 0; //Handle the left position of the rail // Go Back $('.prev').click(function(){ leftPosition -= 1; //go one before if(leftPosition < 0) //If less than zero, then go to last leftPosition = $('.mySlides').length-1; animate(leftPosition); }); $('.next').click(function(){ leftPosition += 1; //Same than prev but opposite, if more than total of slides, go to the begining if(leftPosition >= $('.mySlides').length) leftPosition = 0; //send the left position to animate animate(leftPosition); }); function animate(slide){ //animate multipling the lefPosition flag *-100 to make it animate left $('.rail').animate({ left: slide*-100+'%' }, 200); }

 /* The container define the area of slideshow */ .slideshow-container{ width:100%; background:yellow; /* just to identify */ height:100px; position: relative; overflow: hidden; /* This will make the slideshow works with the rail created next */ } .rail{ width: 300%; /* Enough width to contain your slides */ position: absolute; } .mySlides{ width:33.33%; /* Inside the rail, 33% it is the 100% of slideshow container */ background: orange; /* just to identify */ float: left; }

 <div class="slideshow-container"> <div class="rail"> <div id="slideshow" class="mySlides fade"> <div class="numbertext">1 / 3</div> <a href="post003.html"><img src="003.jpg" style="width:100%"></a> <div class="text"><a href="003.html">Popular Posts</a></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="002.jpg" style="width:100%"> <div class="text">New Styles</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="001-main.jpg" style="width:100%"> <div class="text">Submissions</div> </div> </div> </div> <!-- Next and previous buttons --> <a class="prev">&#10094;</a> <a class="next">&#10095;</a> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>