How do I Animate Back to an Original Image with JQuery
<p>I've got a jQuery slider with two images, I'd like the first image to slide back in so it is on a permanent loop.  </p>

<p>I have link to the a pen here <a href="https://codepen.io/emilychews/pen/ENbbqW" rel="nofollow noreferrer">https://codepen.io/emilychews/pen/ENbbqW</a></p>

<p>My code is:</p>

<p>HTML</p>

<pre><code>&lt;div id="slider"&gt;
&lt;ul class="slides"&gt;
    &lt;li class="slide"&gt;&lt;img src="images/img1.jpg" alt="slideone"&gt;&lt;/li&gt;
    &lt;li class="slide"&gt;&lt;img src="images/img2.jpg" alt="slidetwo"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$(document).ready(function(){

var slider = $('#slider'),
  slides = $('#slider .slides'),
  slide = $('.slide'),
  currentSlide = 0;

setInterval (function(){
$(slides).animate({'margin-left': '-=266.5px' }, 1000, function(){
        currentSlide++;
          if (currentSlide === slides.length) {
              currentSlide = 0;
              slides.css('margin-left', 0);
          }
  });

}, 3000);

});
</code></pre>

<p>I have set it so the original slide goes back to the first image with margin-left: 0, but I can't work out to get this to happen so that it animates in from the right. At the moment when slide2 gets into position slide1 just appears immediately without the 3 second delay of the setInterval() function, or the animation itself.</p>

<p>Any help would be awesome.</p>

<p>Emily.</p>