How can I use JQuery to automate my slideshow?

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.

Solution

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>