C'est tout à fait possible, avec
le plugin jcarousel par exemple.
Il s'agit de faire des listes imbriquées. Ainsi, sur
la page d'accueil du blog dont je m'occupe, l'un des 3 carrousels (avec 2 "r" en français et un seul en anglais
) est intitulé "Nos prochaines animations". Il est configuré pour faire défiler 1 à 1 les éléments d'une liste, chaque élément de liste contenant 6 sous-éléments.
Pour ce que tu veux faire, il suffirait de reprendre le code à l'identique, en le configurant pour faire défiler les éléments non plus 1 par 1, mais 3 par 3, chaque élément contenant 2 sous-éléments.
Le code HTML serait quelque chose comme :
<div id="mon-carrousel">
<ul>
<li>
<ul>
<li>élément 1, ligne 1</li>
<li>élément 1, ligne 2</li>
</ul>
</li>
<li>
<ul>
<li>élément 2, ligne 1</li>
<li>élément 2, ligne 2</li>
</ul>
</li>
<li>
<ul>
<li>élément 3, ligne 1</li>
<li>élément 3, ligne 2</li>
</ul>
</li>
etc.
</ul>
</div>
Ensuite il suffit en javaScript de configurer le plugin (le code est un peu particulier, dans la mesure où il s'agit de listes imbriquées) à l'aide du code suivant :
$("#mon-carrousel").jcarousel({ list: '>ul', items: '>li' });
Enfin, dans jCarousel (utiliser la dernière version 0.3 disponible sur GitHub dans le lien que j'ai donné ci-dessus), le nombre d'éléments visibles se configure
via la CSS, en spécifiant simplement une largeur pour la div #mon-carrousel :
#mon-carrousel li { width: 200px; }
#mon-carrousel { width: 600px; // 3*200 = 600px -> 3 éléments seront visibles ! }
Modifié par Fix (06 Jun 2012 - 10:50)