Carrousel horizontal avec JQuery

Un caroussel horizontal qui peut faire défiler des images ou du html.
Plusieurs carrousels possibles sur la même page.
Très facile à customiser.

Voir la démo : carrousels horizontaux

1. Les inclusions

- Inclure JQuery
- Inclure carrousel.js
- Inclure carrousel.css

2. Le html

<!-- la classe doit être carrousel, l'id est celui que vous voulez -->
<div class="carrousel" id="mon-carrousel">

	<!-- flèche pour la navigation -->
	<a href="#" class="prev">&lt;</a>

		<!-- div obligatoire -->
		<div class="interieur-carrousel">

			<!-- div obligatoire -->
			<div class="items">

				<!-- chaque élément doit être dans un div class item -->
				<div class="item">
					Du html, ça peut être du texte, une image...
				</div>

				<div class="item">
					Autre séquence html, ça peut être du texte, une image...
				</div>

			</div>

		</div>
		<a href="#" class="next">&gt;</a>
	</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:350px; /* la largeur totale du carrousel */
	height:190px;	/* la hauteur totale du carrousel */
}
#mon-carrousel .next
{
	right:15px; /* le positionnement de la flèche "suivant" par rapport à en haut à droite */
	top:90px;
}
#mon-carrousel .prev
{
	left:15px; /* le positionnement de la flèche "précédente" par rapport à en haut à gauche */
	top:90px;
}

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

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

Vous pouvez évidement styler d’avantage, mettre des background, etc. !

4. Appeler le carrousel

Dans un script externe ou dans carroussel.js, mettre

$(document).ready(

	function(){
		carrousel('mon-carrousel',560,1,3000);
	}
);

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 étant apparents en même temps
- la vitesse de déplacement (‘slow’,'normal’,'fast’, ou un nombre de millisecondes)