Mettre en pause un carrousel au survol de la souris

Il n’existe quasiment plus de site d’informations sans carrousel qui présente les actualités à la une, les billets sponsorisés ou des publicités.

Vous l’aurez compris je ne vous parle pas du manège « chevaux en bois » ou du tapis roulant dans les aéroports, mais bien de l’élément IHM qui consiste à afficher une liste d’items défilants, souvent de manière circulaire à l’image du Flip 3D dans Windows Vista et Windows 7 (touche Win+Tab), ou du célèbre affichage des albums dans iTunes.

Ce ne sont pas les scripts ou plugins javascript qui manquent pour en mettre un en place sur votre site perso ou votre blog, l’un de ceux que j’utilise est le plugin jQuery.carouFredSel qui a le mérite d’être complet et simple d’utilisation, le seul reproche que je lui ferai est son poids car il pèse tout de même 30 ko en version minifiée.

Structure du carrousel

L’avantage de ce carrousel réside dans le fait qu’il est tout à fait possible de faire défiler du contenu HTML quel qu’il soit, au lieu d’être obligé de faire défiler des images. Voici un exemple de structure HTML simple que j’utilise :

<div id="carouselWrapper">
	<div id="carousel">
		<div class="work">
			<img src="/img/portfolio/magicsupremacy.jpg" alt="Magic Supremacy" width="450" height="350" />
			<h3>Magic Supremacy</h3>
			<p>
				Entièrement réalisé, ce site communautaire pour les joueurs de Magic l'Assemblée propose une multitude d'outils de qualité
				devenus rapidement indispensables pour les joueurs quel que soit leur niveau. Voici quelques fonctionnalités intéressantes :
				un simulateur de drafts qui permet de jouer entre amis, un générateur de paquets scellés, la création et le partage de decks
				et un design fluide et unique. Un exemple à suivre !
			</p>
			<a href="http://magicsupremacy.fr" target="_blank" title="Magic Supremacy">Visiter le site »</a>
		</div>
		<div class="work">
			<img src="/img/portfolio/desgeeksetdeslettres.jpg" alt="Des Geeks et des lettres" width="450" height="350" />
			<h3>Des Geeks et des lettres</h3>
			<p>
				Ce blog WordPress a été customisé par nos soins. Simple mais efficace, il est la preuve que le minimalisme dans le design
				peut entraîner l'addiction du lecteur : avec plus de 1000 visites uniques journalières, ce blog peut vous donner envie
				d'ouvrir votre boutique en ligne et d'attirer les internautes dans votre <em>agence web</em>.
			</p>
			<a href="http://desgeeksetdeslettres.com/blog" target="_blank" title="Des Geeks et des lettres">Visiter le site »</a>
		</div>
		<div class="work">
			<img src="/img/portfolio/agencewebdesigner.jpg" alt="Agence Web-Designer" width="450" height="350" />
			<h3>Agence Web-Designer</h3>
			<p>
				Il ne s'agit ni plus ni moins que du site que vous êtes en train de consulter. Il vous présente rapidement ce en quoi vous
				êtes en mesure de vous attendre en nous confiant la création de votre espace web. Pour toute demande élaborée, n'hésitez pas
				à nous contacter directement.
			</p>
			<a href="http://agence-web-designer.fr" target="_blank" title="Agence Web-Designer">Visiter le site »</a>
		</div>
	</div>
	<a id="prev" href="#" title="Précédent"><span></span></a>
	<a id="next" href="#" title="Suivant"><span></span></a>
</div>

Déclenchement du défilement

Le plugin carouFredSel possède un attribut qui permet de lancer le défilement automatiquement ainsi qu’un paramètre permettant de régler le temps d’affichage entre chaque diapo, à titre d’exemple voici ce que cela donnerait :

$('#carousel').carouFredSel({
	scroll	: {
		duration	: 0,
		pauseDuration	: 5000
	},
	auto	: true
});

Cependant pour faire ce que nous souhaitons, à savoir pouvoir mettre en pause et reprendre le défilement au survol de la souris sur une diapo, je n’utilise pas l’option de défilement automatique offert par le plugin, je déclenche moi-même le changement de diapo toutes les X secondes en appelant l’évènement next qui permet de passer à la diapo suivante.

Voici le script JavaScript :

var timer = setInterval(function() {
		$("#carousel").trigger("next");
	}, 5000);

Arrêt/Reprise du défilement

La variable timer représente désormais le moyen de simuler l’arrêt et la reprise de l’opération paramétrée à la fonction setInterval(), à savoir le déclenchement du passage à la diapo suivante. L’arrêt du processus se fait en appelant la méthode clearInterval() sur la variable timer.

Il vous suffit alors de programmer les endroits où vous souhaitez que votre souris agisse sur le défilement, dans mon cas je choisis la diapo tout entière mais cela pourrait être uniquement le titre ou l’image, et d’écrire ces quelques lignes JavaScript :

$('#carousel .work').mouseenter(function() {
		clearInterval(timer);
	}).mouseleave(function() {
		clearInterval(timer);
		timer = setInterval(function () {
				$("#carousel").trigger("next");
			}, 5000);
	});

Pour voir le mécanisme en action, je vous invite à visiter notre nouveau site à Greg et moi, et de survoler avec votre souris le carrousel présenté en page d’accueil :

Cet article a été écrit par :

Mimie – qui a déjà rédigé 124 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

• jQuery : Génération d’un formulaire jetable pour l’appel d’une action Struts
• Paypal : Ajout d’un lien au lieu d’un bouton
• Soumission d’un formulaire au format JSON avec jQuery
• JavaScript : Les bonnes pratiques
• SEO : Bien référencer son site Web full Ajax