Infinite slideshow

Créer un slider continue : Infinite slideshow

Je reprend ici l’excellent tutoriel de Geoffrey Crofte sur la possibilité de créer un slider continu avec très peu de jquery.
Voici le code:

See the Pen jEawPW by yuyazz (@yuyazz) on CodePen.

Pour les explications, je reprends celles très claires de Geoffrey.

« La partie qui suit permet de définir une action qui va se répéter à intervalle régulier. La fonction setInterval() prend en paramètres une fonction anonyme (ou le nom d’une fonction existante), et le délai en milliseconde entre chaque exécution de la fonction. »  l’auteur du tuto utilise ici le principe de chaînage, qui permet une économie de code conséquente :

 $(".slideshow ul").animate({marginLeft:-350},800,function(){
   $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
 })

On cible en premier l’ul auquel on va appliquer à une animation pour lui donner une marge négative de 350px en 0,8 secondes (animate(marginLeft:-350, 800)). La fonction animate() permet d’exécuter une fonction de callback, qui s’exécute quand l’animation est terminée. La fonction de callback est à déclarer juste après le paramètre de durée de l’animation.

$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));

$(this) représente chacun des « .slide ul" de l'objet jquery.
On supprime la marge appliquée précédemment, on cherche le dernier « li" de notre liste=> (find("li:last")) et on y plaçe juste après=> (after()) le premier slide => ($(this).find("li:first")).