Image slideshow

Image slideshow

What I'm trying to make is a slideshow of 3 images that repeats itself over and over again.
Let me start from HTML code:

  1. <img src="panoramas\panorama1.jpg" class="slides active-img" />
  2. <img src="panoramas\panorama2.jpg" class="slides inactive-img"/>
  3. <img src="panoramas\panorama3.jpg" class="slides inactive-img" />

CSS:

  1. .active-img{
  2.     height: 500px;
  3.     width: 100%;
  4. }
  5. .inactive-img{
  6.     display:none;
  7. }

Finally, jQuery:
  1. var currentImage =$('.active-img');
  2.             var nextImage = currentImage.next();
  3.            
  4.             setInterval (function(){
  5.                 if (nextImage.length == 0 ){
  6.                    
  7.                     nextImage = $('.slides').first();
  8.                    
  9.                 }
  10.                     currentImage.fadeOut(300);
  11.                     setTimeout(function(){
  12.                         currentImage.removeClass("active-img");
  13.                         currentImage.addClass("inactive-img");
  14.                     }, 300)
  15.                    
  16.                     setTimeout(function(){
  17.                         nextImage.removeClass("inactive-img");
  18.                         nextImage.addClass("active-img");   
  19.                         currentImage = nextImage;
  20.                         nextImage = currentImage.next();
  21.                        
  22.                     }, 300)
  23.                    
  24.             }, 5000);

This all seems fine to me but what the program does is slide through the images first time but when it comes to last, instead of returning to first it just goes to..well nothing. Just as if I didn't write that if statement at the beginning of the loop.

Hope someone can answer this, thanks in advance