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")).

2 commentaires sur “Infinite slideshow

  1. Damien

    Bonsoir!

    Je recopie tel quel est le code sur vscode et quand je test sur mozilla, ça me sort que la function animate n’est pas connue… j’ai bien placé la source de jquery et cie :/.

    Sincerement je vois pas d’ou viens l’erreur pour le coup …

  2. copier coller Auteur de l'article

    Merci pour ce retour!
    Il doit bien y avoir une erreur quelque part car le code semble fonctionner ici…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.