Question

I have created a 4 image endless slideshow, which works more or less well (code below) crossfading each image and pausing for a short period. Then repeating in an endless loop. But I noticed the timing of the transitions is not always the same. I am also not sure if I have gone about this in the best way by calling the slides() function within the slides() function. Perhaps that is what is causing the timing inconsistencies? How would you optimize this code? Please bear in mind this has to be an endless slideshow. Thanks in advance.

slides();

function slides() {
    $('#slide1').fadeTo(1200, 1).fadeTo(3000, 1, function () {
        $('#slide1').animate({
            opacity: 0
        }, 1500);
        $('#slide2').fadeIn(1500).fadeTo(3500, 1, function () {
            $('#slide2').animate({
                opacity: 0
            }, 1500);
            $('#slide3').fadeIn(1500).fadeTo(3500, 1, function () {
                $('#slide3').animate({
                    opacity: 0
                }, 1500);
                $('#slide4').fadeIn(1500).fadeTo(3500, 1, function () {
                    $('#slide4').animate({
                        opacity: 0
                    }, 1500);
                    slides();
                });
            });
        });

    });

}

Answer 1

slide(1);

function slide(n) {
  $('#slide' + n).fadeTo(1200, 1).fadeTo(3000, 1, function () {
        $('#slide' + n).animate({
            opacity: 0
        }, 1500);
        slide((n % 4) + 1);
  });
}