Comment optimiseriez-vous ce code pour un diaporama de fondu enchaîné infini jquery 4 diapos?

Question

J'ai créé un diaporama sans fin de 4 images, qui fonctionne plus ou moins bien (code ci-dessous) en fondu enchaînant chaque image et en faisant une pause pendant une courte période. Puis répéter dans une boucle sans fin. Mais j'ai remarqué que le timing des transitions n'est pas toujours le même. Je ne suis pas sûr si je suis allé à ce sujet de la meilleure façon en appelant la fonction slides() dans la fonction slides(). Peut-être que c'est ce qui cause les incohérences de synchronisation? Comment optimiseriez-vous ce code? S'il vous plaît gardez à l'esprit que cela doit être un diaporama sans fin. Merci d'avance.

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); 
    }); 
}