Faire défiler horizontalement des images avec Javascript

Loin de moi l'idée de vouloir réinventer la roue, je me suis mis en tête de trouver le script javascript "qui va bien" et qui plus est, compatible avec un maximum de navigateur (IE, FF, Opera, Safari ...) me permettant de faire défiler automatiquement des images verticalement ou horizontalement. Je suis tombé sur pas mal d'exemples mais aucun n'a retenu mon attention hormis Jcarousel. Jcarousel est visible en démo ici en version Lite là, mais l'exemple le plus complet reste ici. L'article suivant a pour but de clarifier quelques points et de vous aider à utiliser Jcarousel sur votre propre site, simplement et rapidement.

Aperçu Ce qui suit n'est qu'une simple image !

Les fichiers nécessaires Je ne détaille ici que les fichiers strictement nécessaires dans l'implémentation d'une liste défilante d'images en mode automatique et contrôlé.
L'archive au format ZIP disponible ici. Vous n'êtes pas obligé de lire ce qui suit, l'archive suffit pour une utilisation basique.

1. testJS.html - Contenant un document au format html
2. 1. avec un entête javascript spécifiant les configurations de la liste défilante ainsi que les fichiers à charger et leur description
   2. avec un entête CSS
3. caroussel.js - Configure l'apparence de la liste défilante
4. Dossier image - Contient une liste d'image
5. 1. Les images à afficher (thumb_1.jpg)
   2. Les images de l'interface (boutonPrecede)
6. Dossier js - Contenant les scripts
7. 1. carousel.js
   2. yahoo-dom-event.js
   3. container_core-min.js
   4. dragdrop-min.js
   5. utilities.js

Premier constat, cela semble bien complexe pour simplement faire défiler quelques images, mais sachez que j'ai simplifié au maximum le nombre de fichier JS nécessaire. Dans un soucis de clarté il peut être intéressant de placer le javascript du fichier testJS.html vers fichier type configuration.js et faire de même pour le contenu CSS (configuration.css voir de placer dans caroussel.css). En séparant correctement les différents parties de code on gagnerait un temps précieux pour la compréhension.
Comprendre le fonctionnement Sans avoir réellement fouillé le coeur du script et loin d'avoir compris toutes les grandes subtilités je peux vous informer des données suivantes :
Préparer les listes d'images testJS.html var imageList = [
             "images/thumb_1.jpg",
             "images/thumb_2.jpg",
               ....
             ]; Correspond à la liste des images à charger
De la même façon il est possible de charger la description des images, ainsi que des liens hypertextes sur les images en créant le tableau imageDesc et imageUrl. (Il existe une solution plus propre)
testJS.html var imageDesc = [
   "Ceci est fleur",
"Mais çà un chapeau",
               ....
             ]; Correspond à la liste des descriptions à charger
testJS.html var imageUrl = [
   "http://google.fr",
"http://blog.creaone.fr",
               ....
             ]; Correspond à la liste des URL
Faire afficher les images, les descriptions et les liens Tout se passe au niveau d'une boucle situé à la ligne 159 de fichier.html. Dans le tableau suivant la partie supérieure correspond au script d'origine et à la partie inférieure au script légèrement amélioré :
testJS.html    for(var i=start;i
      var liItem = carousel.addItem(i, fmtItem(imageList[i], "#", "Number " + i, i));}
   for(var i=start;i
       var liItem = carousel.addItem(i, fmtItem(imageList[i], imageUrl[i], imageDesc[i], i));}
Afficher la première photo Peut être erreur de ma part, mais j'ai constaté que thumb_1.jpg n'était jamais afficher, pour remédier à ça j'ai remplacé "i" par "i-1"  dans imageList[i], imageUrl[i], imageDesc[i], i.
Changer le nombre de miniatures
carousel = new YAHOO.extension.Carousel("dhtml-carousel",
      {
         numVisible:   4, //  nombre d'élément visible
         animationSpeed:   0.7, // vitesse d'animation
         scrollInc:   3, // itération de 3 en 3
         navMargin:   40,
         prevElement:   "prev-arrow",
         nextElement:   "next-arrow",
         loadInitHandler:   loadInitialItems,
         loadNextHandler:   loadNextItems,
         loadPrevHandler:   loadPrevItems,
         prevButtonStateHandler:   handlePrevButtonState,
         autoPlay: 3000,
         size:11, // nombre d'élément à afficher au total
         wrap:true
      }
Changer la taille des miniatures Pour changer la taille des miniatures, dans test.html changer le bloc :
var innerHTML =
        '
        url +
        '">
        imgUrl +
      '" width="' +
      75 +
      '" height="' +
      75+
      '"/>' +
        title +
        '';
par celui ci :
var innerHTML =
        '
        url +
        '">
        imgUrl +
      '" width="' +
      120 +
      '" height="' +
      120+
      '"/>' +
        title +
        '';
N'oubliez de modifier le style css sans quoi des surprises vous attendent, en effet la balise " li "comportant l'image sera de largeur trop petite. Vous devez modifier .carousel-component .carousel-list li {}, passer la valeur de width à 129 px par exemple. Le mieux c'est encore de calibrer petit à petit soi-même.
Conclusion D'autres modifications sont possibles comme la définition de la largeur et de la hauteur de la liste défilant. Il est également possible toujours grâce au style CSS de définir exactement l'espace entre chaque miniature. A vous de bidouiller dans le css.