Carrousel automatique avec JQuery

Petit script de carrousel horizontal, avec défilement automatique, et témoins lumineux pour vous à quelle « page » du carroussel on est.
Très facile à customiser.

Voir la démo : carrousel automatique

1. Les inclusions

2. Le html

<!-- la classe doit être carrousel, l'id est celui que vous voulez -->
<div class="carrousel" id="mon-carrousel">
<!-- div obligatoire -->
<div class="interieur-carrousel">
<!-- div obligatoire -->
<div class="items">
<!-- chaque élément doit être dans un div class item -->
<div class="item">
<img src="images/1.png" alt="" />
</div>
<div class="item">
<img src="images/6.png" alt="" />
</div>
</div>
</div>
<!-- div obligatoire (placement des témoins) -->
<div class="temoins"></div>
</div>

3. Personnalisation

La feuille de style carrousel.css contient déjà tout ce qui est générique pour styler votre carrousel. Vous n’avez plus qu’à ajouter dans votre feuille de style les éléments de largeur et de hauteur propre à votre carrousel, en utilisant l’indentifiant de votre caroussel.

Voici les éléments que vous devez obligatoirement styler : (les nombres sont des exemples)

#mon-carrousel{
width:531px; /* la largeur totale du carrousel */
height:373px;	/* la hauteur totale du carrousel (prévoir la place pour le div.temoins) */
}

#mon-carrousel .interieur-carrousel
{
margin-left:0px; /* décalage entre le début du caroussel et l'endroit où disparaissent les images */
margin-top:0px; /* décalage par rapport à en haut du carrousel */
width: 533px; /* la largeur de l'interieur = (largeur d'un item + margin right d'un item)*(nombres d'item étant apparants en même
temps) */
height:331px;	/* la hauteur d'un item */
}

#mon-carrousel .item{
width:259px;	/* la largeur d'un item */
margin-right:13px; /* son espacement éventuel par rapport à l'item suivant */
height:331px; /* la hauteur d'un item */
}

4. Appeler le carrousel

Dans un script externe ou dans carroussel.js, mettre

$(window).load(
function(){
carrousel('mon-carrousel',272,2,3000,1000,'left','images/on.png','images/off.png');
}
);

La fonction carrousel prend comme arguments :

  • l’id du carrousel à animer
  • la largeur à déplacer (largeur d’un item+son margin éventuel)
  • le nombre d’éléments par « page » (nombre d’éléments qui se déplacent à chaque itération)
  • la vitesse de déplacement (’slow’,’normal’,’fast’, ou un nombre de milli-secondes)
  • le temps de pause entre chaque itération (en milli-secondes)
  • le sens de départ du carrousel (laisser left)
  • le chemin de l’image représentant le témoin de page allumé
  • le chemin de l’image représentant le témoin de page éteint