{"id":1356,"date":"2012-08-13T08:46:28","date_gmt":"2012-08-13T06:46:28","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1356"},"modified":"2015-10-08T12:59:02","modified_gmt":"2015-10-08T10:59:02","slug":"infinite-slideshow-quelques-lignes-jquery","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/infinite-slideshow-quelques-lignes-jquery","title":{"rendered":"Un Infinite slideshow en quelques lignes de jQuery"},"content":{"rendered":"

Un Slideshow sur une page d’accueil, c’est joli, c’est \u00e0 la mode, mais c’est souvent lourd \u00e0 int\u00e9grer. Il vous faudra des comp\u00e9tences certaines en jQuery, ou utiliser des plugins d\u00e9j\u00e0 pr\u00eats.
\nAujourd’hui je vous propose un tutoriel pour cr\u00e9er un infinite slideshow<\/em> en quelques lignes de code.<\/p>\n

Je vous ai promis, via Twitter, un \u00ab\u00a0dossier-tutoriel\u00a0\u00bb sur la cr\u00e9ation d’un slideshow de A \u00e0 Z avec quelques options sympa. Cet article ne fait pas partie du dossier, il n’a pas grand chose \u00e0 voir, il s’agit simplement de vous pr\u00e9senter une solution enfantine avec une petite dose de HTML, CSS et jQuery.<\/p>\n

L’effet infinite<\/em><\/h2>\n

Cet effet donne l’impression que votre slideshow ne se termine jamais, il tourne en boucle ind\u00e9finiment sans jamais revenir en arri\u00e8re.
\nPour se faire, il suffit de placer l’image que l’on vient de visualiser en fin de liste \u00e0 chaque d\u00e9filement d’image, comme sur le sch\u00e9ma suivant :<\/p>\n

\"L'image<\/p>\n

\u00c0 chaque fois qu’une image vient d’\u00eatre vue et laisse place \u00e0 l’image suivante, elle est plac\u00e9e en fin de liste afin de cr\u00e9er une boucle sans fin.<\/p>\n

La structure de base<\/h2>\n

Une division contenant une liste d’images suffira pour notre tutoriel.<\/p>\n

<div class=\"slideshow\">\r\n\t<ul>\r\n\t\t<li><img src=\"image1.jpg\" alt=\"\" width=\"350\" height=\"200\" \/><\/li>\r\n\t\t<li><img src=\"image2.jpg\" alt=\"\" width=\"350\" height=\"200\" \/><\/li>\r\n\t\t<li><img src=\"image3.jpg\" alt=\"\" width=\"350\" height=\"200\" \/><\/li>\r\n\t\t<li><img src=\"image4.jpg\" alt=\"\" width=\"350\" height=\"200\" \/><\/li>\r\n\t<\/ul>\r\n<\/div><\/code><\/pre>\n
J’utilise ici une liste non ordonn\u00e9e, mais un groupe de figure<\/code> et figcaption<\/code> peut aussi faire l’affaire.
\nJe vous laisse remplir les textes alternatifs \ud83d\ude09<\/p>\n
Une fois cette structure en place, il nous faut la styler pour lui donner l’apparence du slideshow.<\/p>\n
Les styles de bases<\/h2>\n
Notre conteneur doit poss\u00e9der une largeur fixe, et cacher le d\u00e9bordement du contenu.
\nDans le dossier en cours de pr\u00e9paration dont je parlais en d\u00e9but d’article, nous proc\u00e8derons de mani\u00e8re plus \u00ab\u00a0propre\u00a0\u00bb en prenant en compte l’activation, ou non, de JavaScript. Mais passons, ici faisons plus simple.<\/p>\n
.slideshow {\r\n   width: 350px;\r\n   height: 200px;\r\n   overflow: hidden;\r\n   border: 3px solid #F2F2F2;\r\n}\r\n\r\n.slideshow ul {\r\n    \/* 4 images donc 4 x 100% *\/\r\n   width: 400%;\r\n   height: 200px;\r\n   padding:0; margin:0;\r\n   list-style: none;\r\n}\r\n.slideshow li {\r\n   float: left;\r\n}<\/code><\/pre>\n
Rien de compliqu\u00e9 ici : on donne les dimensions aux conteneurs, on annule quelques styles par d\u00e9faut (marges, puces de liste), puis on fait flotter les \u00e9l\u00e9ments. On peut \u00e9galement utiliser display:inline-block<\/code><\/a>.<\/p>\n
Un petit coup de jQuery<\/h2>\n
La premi\u00e8re fois que j’avais \u00e9cris ce code, j’ai utilis\u00e9 la biblioth\u00e8que jQuery 1.5.1. Quand on voit le poids de la biblioth\u00e8que en version 1.7+, je me suis dit qu’on pouvait rester sur la 1.5.
\nVoici le code, je vous l’explique apr\u00e8s.<\/p>\n
<script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5.1\/jquery.min.js\"><\/script>\r\n\u00a0\r\n<script type=\"text\/javascript\">\r\n   $(function(){\r\n      setInterval(function(){\r\n         $(\".slideshow ul\").animate({marginLeft:-350},800,function(){\r\n            $(this).css({marginLeft:0}).find(\"li:last\").after($(this).find(\"li:first\"));\r\n         })\r\n      }, 3500);\r\n   });\r\n<\/script><\/code><\/pre>\n
Un grand coup d’explications<\/h2>\n
Voici quelques explications pour les personnes les moins aguerries en jQuery, car le code est court, mais quelque peu condens\u00e9.<\/p>\n
\r\n   $(function(){\r\n      [\u2026]\r\n   });<\/code><\/pre>\n
Cette partie englobant notre fonction permet de v\u00e9rifier que le document est bien charg\u00e9, c’est l’\u00e9quivalent de la fonction ready()<\/code><\/a>.<\/p>\n
\r\n   setInterval(function(){\r\n      [\u2026]\r\n   }, 3500);<\/code><\/pre>\n
Cette partie permet de d\u00e9finir une action qui va se r\u00e9p\u00e9ter \u00e0 intervalle r\u00e9gulier. La fonction setInterval()<\/code><\/a> prend en param\u00e8tres une fonction anonyme (ou le nom d’une fonction existante), et le d\u00e9lai en milliseconde entre chaque ex\u00e9cution de la fonction. Dans notre cas, nous d\u00e9finissons une fonction anonyme avec function(){}<\/code> et d\u00e9finissons la r\u00e9p\u00e9tition \u00e0 3,5 secondes.
\nPetite parenth\u00e8se : il arrive tr\u00e8s souvent de croiser la syntaxe var t = setInterval()<\/code>. Cette syntaxe permet l’annulation de la r\u00e9p\u00e9tition gr\u00e2ce \u00e0 la fonction clearInterval(t)<\/code>.<\/p>\n
Le tron\u00e7on qui va suivre est un peu plus complexe \u00e0 comprendre car il utilise massivement le principe de cha\u00eenage de jQuery. Il faut imaginer qu’\u00e0 chaque fois qu’un point apparait, on utilise le pr\u00e9c\u00e9dent objet jQuery pour le manipuler.<\/p>\n
Exemple :<\/p>\n
$('ul').find('li').css('color', 'red').filter(':first').css('color','green');<\/code><\/pre>\n
Nous commen\u00e7ons par \u00ab\u00a0s\u00e9lectionner\u00a0\u00bb nos \u00e9l\u00e9ments ul<\/code> dans notre document, puis nous ciblons les \u00e9l\u00e9ments li<\/code>, la fonction find()<\/code> nous retourne un objet jQuery, puis nous appliquons un style particulier sur ces \u00e9l\u00e9ments. La fonction css()<\/code> nous retourne le m\u00eame objet jQuery que pr\u00e9c\u00e9demment, ce qui nous permet de le manipuler \u00e0 nouveau et d’aller chercher uniquement le premier \u00e9l\u00e9ment li<\/code> gr\u00e2ce \u00e0 la fonction filter()<\/code> qui retourne \u00e9galement un objet jQuery auquel on va appliquer d’autres styles, etc.
\nIl faut savoir que la plupart des fonctions jQuery permettent ainsi le chainage.<\/p>\n
Reprenons donc sur ce fameux tron\u00e7on :<\/p>\n
\r\n $(\".slideshow ul\").animate({marginLeft:-350},800,function(){\r\n   $(this).css({marginLeft:0}).find(\"li:last\").after($(this).find(\"li:first\"));\r\n })<\/code><\/pre>\n
Nous commen\u00e7ons par cibler notre ul<\/code> que nous allons faire bouger vers la gauche gr\u00e2ce \u00e0 une animation qui va appliquer une marge n\u00e9gative de 350px en 0,8 secondes (animate(marginLeft:-350, 800)<\/code>). La fonction animate()<\/a> permet d’ex\u00e9cuter une fonction de callback, il s’agit d’une fonction ex\u00e9cut\u00e9e lorsque animate()<\/code> retourne \u00ab\u00a0complete\u00a0\u00bb : quand l’animation est termin\u00e9e donc :p
\nCette fonction de callback, nous la d\u00e9clarons juste apr\u00e8s le param\u00e8tre de dur\u00e9e de l’animation.
\nCette fonction ex\u00e9cute ce qui suit :<\/p>\n
$(this).css({marginLeft:0}).find(\"li:last\").after($(this).find(\"li:first\"));<\/code><\/pre>\n
De quoi se faire plaisir en terme de chainage.
\n$(this)<\/code> repr\u00e9sente chacun des .slideshow ul<\/code> que pourrait retourner notre objet jQuery (oui, il pourrait y avoir plusieurs slideshow sur votre page).
\nNous partons donc de notre \u00e9l\u00e9ment ul<\/code> auquel nous supprimons la marge n\u00e9gative r\u00e9cemment attribu\u00e9e par l’animation, puis nous allons chercher le dernier li<\/code> de notre liste (find(\"li:last\")<\/code>) et nous y pla\u00e7ons juste apr\u00e8s (after()<\/code>) le premier \u00e9l\u00e9ment de notre liste ($(this).find(\"li:first\")<\/code>).
\nLa fonction after()<\/code><\/a> a une syntaxe assez particuli\u00e8re, j’en conviens, je vous invite donc \u00e0 lire la documentation pour plus d’informations \u00e0 son sujet.<\/p>\n
Tout ce morceau de code est ex\u00e9cut\u00e9 quasiment en m\u00eame temps \u00e0 la fin de l’animation. \u00c0 chaque d\u00e9filement d’un slide, on prend le premier \u00e9l\u00e9ment de la liste, on le place \u00e0 la fin, et on annule la marge n\u00e9gative que l’on vient de donner \u00e0 notre liste. C’est invisible pour l’oeil.<\/p>\n
J’esp\u00e8re que les explications ne sont pas plus complexes que le code \ud83d\ude00<\/p>\n
Voir la d\u00e9monstration<\/a><\/p>\n
Je vous recommanderais presque de ne pas suivre ce tutoriel pour de la production. En effet, en terme d’accessibilit\u00e9 (et m\u00eame d’ergonomie) l’absence de contr\u00f4le sur l’animation est perturbante. (entre autres d\u00e9fauts)
\nLe prochain dossier devrait prendre en compte ces crit\u00e8res.
\n\u00c0 venir donc !<\/p>\n
M\u00e9thode 2<\/h2>\n
Une seconde m\u00e9thode, assez semblable mais plus simple \u00e0 comprendre, nous a \u00e9t\u00e9 propos\u00e9e par Thierry<\/a>. Je vous place le code jQuery :<\/p>\n
(function($){  \r\n  setInterval(function(){  \r\n    $(\".slideshow ul li:first-child\").animate({\"margin-left\": -350}, 800, function(){  \r\n        $(this).css(\"margin-left\",0).appendTo(\".slideshow ul\");  \r\n    });  \r\n  }, 3500);  \r\n})(jQuery);<\/code><\/pre>\n
Les changements se situent sur le premier s\u00e9lecteur, afin que l’animation ne se fasse que sur le premier \u00e9l\u00e9ment de la liste (li:first-child<\/code>).
\nCelui-ci subit un d\u00e9calage de 350 pixels, les autres li<\/code> suivent le mouvement.
\nUne fois cette animation termin\u00e9e, la fonction appendTo()<\/code> permet d’ins\u00e9rer ce premier \u00e9l\u00e9ment en le pla\u00e7ant \u00e0 la suite des autres \u00e9l\u00e9ments du conteneur (.slideshow ul<\/code>), ici \u00e0 la fin des diff\u00e9rents li<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Un Slideshow sur une page d’accueil, c’est joli, c’est \u00e0 la mode, mais c’est souvent lourd \u00e0 int\u00e9grer. Il vous faudra des comp\u00e9tences certaines en jQuery, ou utiliser des plugins d\u00e9j\u00e0 pr\u00eats. Aujourd’hui je vous propose un tutoriel pour cr\u00e9er un infinite slideshow en quelques lignes de code.<\/p>\n","protected":false},"author":4,"featured_media":2826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,9],"tags":[228,366,52,113,15],"coauthors":[597],"class_list":["post-1356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-tutoriels","tag-astuce","tag-infinite","tag-jquery","tag-slideshow","tag-tutoriel"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=1356"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/2826"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=1356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=1356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=1356"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=1356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}