[Webdesign] Kwicks, un plugin jQuery pour créer des caroussels percutants

Vous avez certainement remarqué que de plus en plus de site arborent des carrousels pour présenter leurs dernières créations.

En effet, faire défiler plusieurs billets, en y ajoutant une touche dynamique peut améliorer le taux de clics.

Les solutions pour implémenter ce genre de choses sont légions. Mais toutes ne se valent pas.

 
Kwicks for jQuery est un plugin pour le framework jQuery, qui permet de créer très simplement des carrousels percutants.

[démo live ici]

Kwicks ne fait pas tourner les entrées mais crée un effet de déplacement très classes.

Le plugin s’utilise très simplement. Des connaissances de base en webdesign suffisent.

Tout d’abord, il faut déclarer les scripts jQuery et le plugin Kwicks (en adaptant selon les versions) :

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.kwicks-1.5.1.js" type="text/javascript"></script>

Ensuite, vous devez déclarer votre liste non ordonnée et ses éléments. Ce seront ces éléments qui seront affichés dans le carrousels.

<ul class="kwicks" >  
     <li id="kwick1">Element1</li>  
     <li id="kwick2">Element2</li>  
     <li id="kwick3">Element3</li>  
     <li id="kwick4">Element4</li>  
</ul> 

Ensuite, il vous faudra définir les styles que vous souhaitez voir apparaitre. Il n’y a pas de limite si ce n’est celle de votre créativité.

Un CSS simple sera de la forme :

.kwicks li{
	float: left;
	width: 125px;
	height: 100px;
	margin-right: 5px;
}
#kwick1 { 
	background-color: #53b388;
	background-image: url('images/meet.gif');
}
#kwick2 {
	background-color: #5a69a9;
	background-image: url('images/kwicks.gif');
}
#kwick3 {
	background-color: #c26468;
	background-image: url('images/for.gif');
}
#kwick4 { 
	background-color: #bf7cc7;
	background-image: url('images/jquery.gif');
	margin-right: none;
}

Enfin, il vous faut ajouter un petit script pour activer le plugin :

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 5
	});
});

C’est fini. bien entendu il existe un certain nombre d’options très intéressantes, comme la vitesse de déploiement des éléments.

Vous pouvez aussi rendre le carrousel vertical, ce qui très pratique pour créer un jolie menu.
Il faudra utiliser l’option isVertical :

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 5,
                isVertical : true 
	});
});

Vous pouvez également choisir de laisser un élément ouvert (le premier de la liste par défaut). L’option sticky est faite pour cela.

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 5,
                sticky : true 
	});
});

Cette option se combine bien avec l’option event qui permet de choisir l’évènement qui cause le déploiement d’un élément.

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 5,
                sticky : true,
                event : click
	});
});

Vous pouvez visualiser des exemples en live sur cette page d’exemple.

Un autre exemple fini est l’excellent thème NewsCast, qui utilise ce script.

Kwicks for jQuery est un très bon plugin que je recommande. Il est compatible avec tous les navigateurs.

Téléchargez le plugin Kwicks pour jQuery