Slideshow Stops after last image

Question

My slideshow works, however when the last image is reached it stays stuck there and won't continue, when I refresh the page it starts at the first image again and works untill the last image is reached.

HTML:

       <div class="slider">

        <img src="slide1_hamburger.jpg" class="slide_image slider_active"></img>
        <img src="slide2_eetzaal.jpg" class="slide_image"></img>
        <img src="slide3_carpaccio.jpg" class="slide_image"></img>

    </div>

CSS:

.slide_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    opacity: 0;
      transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
}


.slider_active {
    opacity: 1;
    transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
}

Jquery:

function slideSwitch() {
        var $slider_active = $('div.slider IMG.slider_active');
        var $next = $slider_active.next();    

        $next.addClass('slider_active');

        $active.removeClass('slider_active');
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
});

Does anyone have an idea why it stops at the last image and won't continue? Thanks in advance.

Answer 1

It stops at the last image because the routine tries to get the .next() element, which is not there.

You need to add a check to see if $next actually exists and then go back to the start if it doesn't. Something like:

function slideSwitch() {
    var $slider_active = $('div.slider IMG.slider_active');
    var $next = $slider_active.next();    

    if(!$next) {
        $next = $('div.slider IMG')[0];
    }

    $next.addClass('slider_active');

    $slider_active.removeClass('slider_active');
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Answer 2

You unused $active object in the code. If you remove the class .slider_active and one more correction your setInterval only works for mozila if you want all browsers supports

use like

setInterval(slideSwitch, 5000 );

just use

$('.slider_active').removeClass('slider_active');

your code be

function slideSwitch() {
        var $slider_active = $('div.slider IMG.slider_active');
        var $next = $slider_active.next();  
        $('.slider_active').removeClass('slider_active');
        $next.addClass('slider_active');
        if($next.length == 0){  // for cyclic rotation
         $('div.slider IMG:eq(0)').addClass('slider_active');
        }
 }
$(function() {
    setInterval(slideSwitch, 5000);
});

Fiddle sample

Answer 3

All you have to do is point the $next variable to the first image once it has gotten to the end of the images.

replace var $next = $slider_active.next(); with

var $next =  $slider_active.next().length ? $slider_active.next() : $('div.slider IMG:first');