Même s’il existe de nombreux scripts prêt à l’emploi, comme l’excellent jcaroussel, l’utilisation de ceux-ci dans un environnement spécifique s’avère parfois compliqué. L’imbrication du html et du javascript notamment, ne facilite pas en effet la personnalisation de l’objet et la prise en main de la CSS relève souvent de l’exploit.
Aussi, afin de mettre en place quelque chose de plus personnel et de moins gourmand je vous propose d’apprendre à réaliser simplement votre propre carrousel à l’aide de jquery.
Un carrousel, à quoi ça sert ?
L’objectif de ce script consiste à afficher sur une page (html) une liste d’objet (potentiellement infinie) dont un nombre limité seulement sera visible par l’utilisateur. Il sera bien sûr complété par une interface de navigation pour parcourir ce “catalogue” d’objets (qui peuvent être des vignettes des textes ou encore des vidéos). Les applications sont donc multiples : diaporama photo, diaporama produit, ou encore module d’actualités.
Ce dont vous avez besoin pour commencer.
Avant toute chose, il convient de déterminer avec précision l’apparence finale de votre carrousel. En effet, pour que l’affichage fonctionne correctement sur tous les navigateurs (et c’est aussi le but), il conviendra d’être précis et méticuleux. En premier lieu donc, commencez par mesurer (en pixels) l’espace dont vous disposez pour l’affichage du carrousel. Dans notre exemple, le carrousel sera horizontal ce qui signifie que j’ai besoin de connaître la largeur totale de l’espace qui accueillera la navigation, par exemple de mon diaporama.
Comme le montre l’image ci-dessus, cette mesure doit tenir compte de l’ensemble des éléments qui constituent votre navigation. Ensuite, il convient généralement de sortir la calculatrice pour déterminer d’autres paramètres très important :
- La nombre d’éléments visibles au chargement du carrousel (ici 6).
- La dimension (précise) de chaque éléments (ne pas oublier les bordures éventuelles…).
- L’espacement entre chaque objet (ici 10 pixels qui seront obtenus par une “margin-right”).
Dans notre exemple, chaque élément visible occupera donc une largeur totale de 96px. (80 de largeur + 6 de bordure (3 de chaque côté) +10 de marge droite). Soit un total de 576 pixels nécessaires pour l’affichage de 6 éléments. Si vous avez suivi, il nous reste donc 12 pixels à droite et à gauche de nos vignettes qui serviront à l’affichage de la navigation (par exemple avec de petites flèches explicites.
Et maintenant on fait quoi ?
Une fois que le gabarit de votre Carrousel est déterminé, il convient de le créer en HTML. Pour cela je vais utiliser deux conteneurs, deux liens et une liste non ordonnées :
<!--Le premier conteneur qui englobe l'intégralité de la navigation-->
<div id="navigation">
<!--Le lien pour reculer dans notre diaporama-->
<a href="#" id="prev" class="first"><img src="left.jpg" alt="Précédent" width="10" height="10" border="0"/></a>
<!--Le second contenur qui englobe les objets-->
<div id="thumb">
<!--Le liste des objets-->
<ul id="defileur">
<li class="pdt" id="a0"><img src="vign4.jpg" /></li>
<li class="pdt" id="a1"><img src="vign1.jpg" /></li>
<li class="pdt" id="a2"><img src="vign2.jpg" /></li>
<li class="pdt" id="a3"><img src="vign3.jpg" /></li>
<li class="pdt" id="a4"><img src="vign4.jpg" /></li>
<li class="pdt" id="a5"><img src="vign5.jpg" /></li>
<li class="pdt" id="a6"><img src="vign6.jpg" /></li>
<li class="pdt" id="a7"><img src="vign2.jpg" /></li>
<li class="pdt" id="a8"><img src="vign5.jpg" /></li>
<li class="pdt" id="a9"><img src="vign2.jpg" /></li>
<li class="pdt" id="a10"><img src="vign4.jpg" /></li>
<li class="pdt" id="a11"><img src="vign5.jpg" /></li>
<li class="pdt" id="a12"><img src="vign6.jpg" /></li>
<li class="pdt" id="a13"><img src="vign2.jpg" /></li>
<li class="pdt" id="a14"><img src="vign5.jpg" /></li>
<li class="pdt" id="a15"><img src="vign2.jpg" /></li>
</ul>
</div>
<a href="#" id="next"><img src="right.jpg" alt="Suivante" width="10" height="10" title="Suivant" border="0"/></a>
</div>
Peu importe le html que vous souhaitez utiliser, 2 choses sont importantes dans le code ci-dessus :
- La class “first” que j’ajoute sur le premier lien : elle servira à le masquer lors de l’amorce (puisqu’aucune navigation vers la gauche sera possible au lancement).
- La class “pdt” toujours identique spécifiée sur chaque éléments de la liste : elle servira à compter au chargement de la page combien j’ai d’éléments dans ma liste.
Attaquons nous maintenant au javascript qui va nous permettre de rendre tout ça interactif et nous rapprocher du but. Avec un petit script simple, qui utilisera la puissance de jquery et nécessitant très peu de paramètre hormis le nombre d’éléments visibles au chargement (6 dans notre exemple) qui sera passé en “constante” de configuration.
//On s'assure d'abord que le document est chargé :
$(document).ready(function(){
//On configure notre script en lui indiquant le nombre d'objet visible en même temps :
var nbdisplay = 6;
//Puis on compte le nombre d'objet présent dans notre liste, à adapter peut-être à votre html
var nbobjet = $('#defileur').children('li.pdt').size();
//Enfin on amorce une variable à 0 qui va nous permettre de nous repérer dans la navigation
var repere = 0;
//On crée ensuite deux fonctions assigné sur chacun de nos boutons de navigation :
//La fonction qui permet d'avancer dans le carrousel est assigné au lien possédant l'id "next" :
$('#next').click(
function () {
if ($(this).is(".last")==false) //je n'active la fonction que si je ne suis pas sur le dernier élément
{
repere++; //j'incrémente ma variable de repère
$("#defileur").animate({"left": "-=96px"}, "slow");//je déplace vers la gauche mon conteneur de largeur totale d'un élément (element+marge+bordure).
$('#prev').removeClass();//j'enlève la classe du lien "précedent" pour le faire apparaitre puisque désormais je peux naviguer en arrière.
if((repere+nbdisplay)==nbobjet){//enfin, je calcule si je ne suis pas au bout de ma liste.
$(this).addClass("last");//le cas écheant, j'ajoute une classe au bouton pour le faire disparaitre.
}
}
return false;
});
//La fonction qui permet de reculer dans le carrousel est assigné au lien possédant l'id "prev" :
$('#prev').click(
function () {
if ($(this).is(".first")==false) {
$("#defileur").animate({"left": "+=96px"}, "slow");
repere--;
$('#next').removeClass();
if(repere==0){
$(this).addClass("first");
}
}
return false;
});
});
Il ne me reste plus qu’à ajouter une couche essentielle. La feuille de style. Qui va servir à masquer articiellement les objets qui dépasse le quota autoriser (ici 6) et à afficher et/ou masquer les boutons servant à la navigation.
*{
margin:0;
padding:0;
}
#navigation{
position:absolute;
width:600px;
left:0px;
top:0px;
}
#thumb{
width: 576px;
height:56px;
overflow:hidden;
position:relative;
left:14px;
}
#defileur {
position:absolute;
left:0px;
top:0px;
}
#defileur li {
float:left;
list-style:none;
width:80px;
height:50px;
margin-right:10px;
overflow:hidden;
border:solid 3px #C7922D;
}
.last,.first{
visibility:hidden;
}
#prev{
position:absolute;
top:25px;
left:0;
}
#next{
top:25px;
position:absolute;
left:590px;
}
Voilà, nous y sommes, le carrousel est terminé et permet de naviguer image par image dans notre collection de vignettes.
La démo du script achevé est disponible ici.