Un carrousel jQuery

Dans ce tutorial, je vais vous montrer comment créer un carousel personnalisé en utilisant le code d'un exemple officiel (celui-ci) et lui en apportant quelques améliorations. Pour cela, on commence par créer un fichier vierge « index.html » et deux dossiers, « css » et « js ». Le premier dossier va contenir la feuille de style dans laquelle on va définir les propriétés CSS, et le deuxième va contenir tous nos fichiers JavaScript, à savoir le framework jQuery, le plugin jCarousel et un troisième fichier qui contiendra notre fonction principale. On va donc télécharger jQuery et jCarousel, respectivement ici et ici, on les renomme en « jquery.js » et « jcarousel.js » et on les place dans le dossier « js ». Dans ce même dossier, on va créer un troisième fichier JavaScript que l'on va appeler « mycarousel.js ». De la même façon, on crée un fichier vierge « style.css » que l'on place dans le dossier « css ». Et pour finir, on crée un dossier « images » dans lequel on va placer quatre images quelconques. Tout est prêt pour commencer à programmer !

Préparation du fichier JavaScript

On va maintenant s'intéresser au fichier « mycarousel.js » qui va contenir la fonction qui permet de créer le carousel. Il suffit d'aller directement le chercher dans notre exemple en faisant un Ctrl+U. On récupère la partie JavaScript, ce qui donne le code suivant.
mycarousel.js

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

function mycarousel_initCallback(carousel) {     jQuery('.jcarousel-control a').bind('click', function() {         carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));         return false;     });       jQuery('.jcarousel-scroll select').bind('change', function() {         carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);         return false;     });       jQuery('#mycarousel-next').bind('click', function() {         carousel.next();         return false;     });       jQuery('#mycarousel-prev').bind('click', function() {         carousel.prev();         return false;     }); };   jQuery(document).ready(function() {     jQuery("#mycarousel").jcarousel({         scroll: 1,         animation: 800,         initCallback: mycarousel_initCallback,         buttonNextHTML: null,         buttonPrevHTML: null     }); });

Et voici les différents paramètres qui vont avec :

• scroll : le nombre d'éléments par slide
• animation : la vitesse du scroll ("slow", "fast" ou un entier en millisecondes)
• initCallback : fonction qui est appelée juste après l'initialisation du carrousel

Préparation du fichier HTML

On commence par déclarer la feuille de style dans laquelle on va définir les propriétés CSS de notre carousel. On déclare également nos trois fichiers JavaScript : le framework jQuery, le plugin jCarousel et notre « mycarousel.js ».
index.html

1 2 3 4

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jcarousel.js"></script> <script type="text/javascript" src="js/mycarousel.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css">

Puis on ajoute le code HTML qui définit le carousel, ainsi que les liens qui vont nous permettre de contrôler le carousel via une numérotation. Vous pouvez également le récupérer dans l'exemple.
index.html

01 02 03 04 05 06 07 08 09 10 11 12 13 14

<div id="mycarousel" class="jcarousel-skin-tango">   <div class="jcarousel-control">     <a href="#">1</a>     <a href="#">2</a>     <a href="#">3</a>     <a href="#">4</a>   </div>   <ul>     <li><img src="images/slide1.jpg" border="0" alt=""></li>     <li><img src="images/slide2.jpg" border="0" alt=""></li>     <li><img src="images/slide3.jpg" border="0" alt=""></li>     <li><img src="images/slide4.jpg" border="0" alt=""></li>   </ul> </div>

A noter qu'ici, l'exemple est statique. Mais vous pouvez facilement adapter ce code pour que l'affichage devienne dynamique. Avec avec un peu de PHP, une boucle et un compteur, les numéros de contrôle seront automatiquement incrémentés suivant le nombre de slides générées dynamiquement.

Préparation du fichier CSS

style.css

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

.jcarousel-skin-tango .jcarousel-container {   border: 1px solid #a7a09b;   padding: 4px;   background: #e5e1dc;   margin-left: 10px;   margin-top: 10px; }   .jcarousel-skin-tango .jcarousel-container-horizontal {   width: 450px; }   .jcarousel-skin-tango .jcarousel-item {   width: 450px;   height: 300px; }   .jcarousel-control {   position: absolute;   top:15px;   left:12px;   margin-bottom: 10px;   text-align: center;   z-index:1; }   .jcarousel-control a, .jcarousel-control a:link, .jcarousel-control a:visited {   font-size: 75%;   text-decoration: none;   padding: 3px 6px;   border: 1px solid #fff;   color: #eee;   background-color: #7696e6;   font-weight: bold; }   .jcarousel-control a:focus,.jcarousel-control a:active, .jcarousel-control a:hover {   outline: none;   background:#a4c5fa;   color: #4f70ab; }

Voilà, c'est terminé. Votre carousel devrait fonctionner. Mais si vous testez ce code, vous vous appercevrez que le rendu est loin d'être parfait. En effet, lorsqu'on regarde d'un peu plus prêt, le contrôle du carousel n'affiche pas le numéro du slide actuel en surbrillance (voir image ci-dessous). On ne sait donc pas sur quelle slide on se trouve lorsque la page Web se charge... Or on aimerait que le numéro 1 soit en surbrillance !

Ceci est tout-à-fait normal car jCarousel n'utilise pas de JavaScript pour gérer cette surbrillance, mais uniquement des propriétés CSS (active et focus). On va donc améliorer la fonction JavaScript dans le fichier « mycarousel.js » pour qu'il gère correctement la surbrillance.

Amélioration du fichier JavaScript

mycarousel.js

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

// on déclare deux variables à false var current_lien = false; var current_id = false;   function mycarousel_initCallback(carousel) {     jQuery('.jcarousel-control a').bind('click', function() {         carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));      // jQuery(this) renvoie l'élément .jcarousel-control a, c'est-à-dire un lien    // on ajoute la classe CSS jcarousel-test à notre lien .jcarousel-control a     jQuery(this).addClass('jcarousel-test');      // on vérifie si current-id existe (car il est déclaré à false avant le premier clic)    // et si current_id est différent du numéro cliqué actuel     if (current_id && current_id != jQuery.jcarousel.intval(jQuery(this).text()))    current_lien.removeClass('jcarousel-test');    // alors on supprime la classe CSS jcarousel-test à l'élément current_lien      // current_lien prend la valeur du lien actuel    current_lien = jQuery(this);    // current_id prend la valeur du numéro actuel    current_id = jQuery.jcarousel.intval(jQuery(this).text());       return false;     });       jQuery('.jcarousel-scroll select').bind('change', function() {         carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);     alert(this.options[this.selectedIndex].value);     return false;     });       jQuery('#mycarousel-next').bind('click', function() {         carousel.next();         return false;     });       jQuery('#mycarousel-prev').bind('click', function() {         carousel.prev();         return false;     }); };   jQuery(document).ready(function() {     jQuery("#mycarousel").jcarousel({         scroll: 1,         animation: 800,         initCallback: mycarousel_initCallback,         buttonNextHTML: null,         buttonPrevHTML: null     });           // simule que l'id #premier est cliquée         $("#premier").click(); });

Conséquence sur les fichiers HTML et CSS

N'oublions pas de modifier les fichiers « index.html » et « style.css ». On place un id sur notre premier lien pour simuler que le premier élément soit cliqué. Ainsi lorsqu'on lancera le carousel, le numéro 1 sera en surbrillance.
index.html

1 2 3 4 5 6

<div class="jcarousel-control">         <a id="premier" href="#">1</a>         <a href="#">2</a>         <a href="#">3</a>         <a href="#">4</a> </div>

On édite la feuille de style pour commenter la classe CSS où on applique les pseudo-class focus, active et hover. On la remplace par une nouvelle classe jcarousel-test avec les mêmes propriétés. Attention, il faut bien déclarer cette classe sur la balise a comme nous l'avons fait dans notre script.
style.css

01 02 03 04 05 06 07 08 09 10 11

/*.jcarousel-control a:focus,.jcarousel-control a:active, .jcarousel-control a:hover {         outline: none;         background:#DED9D3;     color: #696969; }*/   a.jcarousel-test:focus, a.jcarousel-test:active, a.jcarousel-test:hover, a.jcarousel-test:link, a.jcarousel-test:visited {     outline: none;         background:#DED9D3;     color: #696969; }

Voilà. C'est terminé pour de vrai cette fois. Et le rendu est plutôt sympathique.