Améliorations carousel infini

Bonjour bonjour

Alors je débute vraiment en javascript je tiens à le préciser (pour justifier mon code tout moche et pas optimisé du tout). Je comprends un peu quand je vois le code d'un autre mais je m'y essaie moi même et donc j'ai procédé à un carousel que je veux rendre "infini", ie à la dernière image, j'aimerais que la première apparaisse à la suite.

Voici ce que j'ai fais pour le moment :

$(document).ready(function() {
	
	$('div.cell').click(function() {
		$(this).siblings('div.cell').removeClass('onfocus');
		$(this).siblings('div.cell').removeClass('rank2');
		$(this).siblings('div.cell').removeClass('rank3');
		$($(this)).addClass('onfocus');
		$($(this)).removeClass('rank2');
		$($(this)).removeClass('rank3');
		$(this).prev('div.cell').addClass('rank2');
		$(this).next('div.cell').addClass('rank2');
		$(this).prev('div.cell').prev('div.cell').addClass('rank3');
		$(this).next('div.cell').next('div.cell').addClass('rank3');
	});
});

Oui je l'avais dis c'est vraiment très laid...

Mon code css :

#moncarousel { width : 100% ; overflow : hidden ; text-align : middle ;}

#moncarousel .cell{ display : none ; vertical-align : middle ; text-align : center ;}

#moncarousel .cell.onfocus { width : 26% ; display : table-cell ;}
#moncarousel .cell.onfocus img { width : 100% ;}

#moncarousel .cell.rank2 { width : 21% ; opacity : 0.7 ; display : table-cell ;}
#moncarousel .cell.rank2 img { width : 100% ;}

#moncarousel .cell.rank3 { width : 16% ; opacity : 0.5 ; display : table-cell ;}
#moncarousel .cell.rank3 img { width : 100% ;}

Et mon code html :

<div id="moncarousel">
		<div class="cell rank3"><img src="plage/plage01.jpg" alt="" /></div>
		<div class="cell rank2"><img src="plage/plage02.jpg" alt="" /></div>
		<div class="cell onfocus"><img src="plage/plage03.jpg" alt="" /></div>
		<div class="cell rank2"><img src="plage/plage04.jpg" alt="" /></div>
		<div class="cell rank3"><img src="plage/plage05.jpg" alt="" /></div>
		<div class="cell"><img src="plage/plage06.jpg" alt="" /></div>
		<div class="cell"><img src="plage/plage07.jpg" alt="" /></div>
		<div class="cell"><img src="plage/plage08.jpg" alt="" /></div>
		<div class="cell"><img src="plage/plage09.jpg" alt="" /></div>
		<div class="cell"><img src="plage/plage10.jpg" alt="" /></div>
		<div class="cell"><img src="plage/plage11.jpg" alt="" /></div>
	</div>

Exemple de mon carousel ici

Je suis preneuse de toute suggestion d'améliorations/optimisation et surtout une idée de comment rendre mon carousel infini car à l'heure actuelle je n'en ai aucune idée...

Merci

Lu

Salutation Luleen

Un peu d'inspiration ne fait pas de tord tout de même : ici.

Remarque que les éléments html « ul et li » seront utilsé plutôt que « div ».
L'écriture est magnifique ici. L'utilisation des pseudos classes :first et :last joueront un rôle décisif.

D'ailleur je te suggère « ul et li » à l'intérieur d'un « div ». L'exemple que je te donne n'est pas identique mais restera une bonne source d'inspiration. Ce script est beaucoup plus optimiser que l'utilisation des « div »

..
Modifié par zardoz (22 Jul 2011 - 12:36)

Bonjour

Merci de ta réponse (et j'avais bien prévenu que je débutais tout juste...)
Le soucis du carousel que tu m'as suggéré en lien est qu'il fonctionne avec des positions en absolute et c'est ce que je souhaite éviter, tu remarques sur ma page de test que le mien se réadapte en fonction de la fenêtre.

Mais je vais plancher sur les :first et :last, merci

Lu

Bon j'ai réussi à trouver un truc qui fonctionne pas trop mal, si quelqu'un sait comment animer le tout je veux bien ^^ !
Mais je me doute qu'il faudrait quelque chose avec des directions pour savoir si ca part à droite ou à gauche...

Lu