title: How can I make my image gallery slider loop through without reversing the animation once I reach the last image?
body: <p>Here is the codepen of the gallery <a href="https://codepen.io/designextras/pen/VweLbNW" rel="nofollow noreferrer">https://codepen.io/designextras/pen/VweLbNW</a></p>
  
  <p>Once you get to the last image, instead of animating to the next one it animates, but goes in reverse and basically shows all the previous images we just clicked through, and then shows the first image again. So imagine I have 100 images it would go reverse and show all 100 before showing the starting image.</p>
  
  <p>I'm not sure how to make it go from image 1,2,3,4 then only show 1 without showing images 3,2 first. </p>
  
  <p>this code is what makes the reverse animation occur, but if I remove it it looks like it achieves the effect I want when it just goes 1,2,3,4, then 1 without showing 3,2 but then there's no animation and I eventually want to add new effects and customizations.</p>
  
  <pre><code> .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 1s ease-in-out;
   }
  </code></pre>
  
  <p>Also, when I click the next or previous button it updates every single picture with the same index value, so maybe there's a way to create a JS function that only updates the image I am on with the index vs all of them to solve this? I don't know how I'd write that or if they would even solve the problem</p>
  
  <p><a href="https://i.stack.imgur.com/XesiT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XesiT.png" alt="enter image description here"></a></p>
  
  <p>is this a problem on my javascript? or CSS?</p>