title: Start over from first image when slide has reached end
body: <p>When my slide through images reaches the end, it stops. I have tried to make it start over, but can't make it happend. I hope someone can help me archieve this, taking base in my code. I followed som tutorials on how to create an image slider with JQuery, so I don't want to go away from the code that I have written (If that's possible). The solutions I've found so far are written with total different ideas.
  Here is the html code:</p>
  
  <pre><code>&lt;body style="background-color: lightblue"&gt;
  &lt;div&gt;
      &lt;div id="slider" style="margin-left: auto; margin-right: auto; width: 800px; height: 800px; margin-top: 100px;"&gt;
          &lt;img src="./images/Dogs.jpg" style="position: absolute;" class="active" /&gt;
          &lt;img src="./images/pic.jpg" style="position: absolute;" /&gt;          
          &lt;img src="./images/Mal.jpg" style="position: absolute;" /&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the JS code:</p>
  
  <pre><code>function startSlide() {
      var $current = $('div #slider img.active');
      var $next = $current.next();        
  
      if($current.length == 0) {
          $next = $('#slider  div:first-child');
          //This is what where the code will go I guess
      }
  
  //  $next.addClass('active');   
      $current.removeClass('active').css({
          "opacity" : 0.0,
          "zIndex" : 2
          });
          $("#slider img").animate({opacity: 1.0}, 2000, function() {
              $next.addClass('active').css({zIndex: 1});
          });
  }
  </code></pre>
  
  <p>So my question is how to write the code so that the slide will start over once it reaches the last image. And preferably keeping the JQuery syntax
  Thanks in advance</p>