Conseil choix Carrousel

Version imprimable

27/01/2011, 12h07
kangouroub

Conseil choix Carrousel

Bonjour,

Je souhaite faire une barre de menu horizontal avec dedans un carrousel car j'ai 25 icônes à afficher et je ne peux que 10(environ) sur la largeur d'un écran standard ;) .

Pour cela, j'aimerais utiliser JQuery et un plugin :lol:. Je trouve pas mal de plugins mais j'aurais aimé connaitre vos préférences avant de commencer.

Lesquels sont complets?? tenus à jour ?? simple a maintenir ?? Bref Quels sont vos préférés et que me conseillez vous ? :aie:

Merci par avance. :ccool:
27/01/2011, 12h19
scourjean

Je trouve sympa celui-ci qui j'espère correspond à tes attentes, il y a plein d'exemple qui devraient te plaire sur le site.

http://caroufredsel.frebsite.nl/
27/01/2011, 13h58
kangouroub

Merci

Je ne connaissais pas celui ci tiens. Je vais l'étudier. Si vous avez d'autres propositions, n'hésitez pas

help

Je n'arrive pas a utiliser ce plugin pour avoir un carrousel qui fait defiler des <div>

Je m'explique :
Je veux faire défiler de gauche a droite et droite a gauche via des boutons
en affichant en permanence 2 images
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="foo4"> <div class="slide"> <img src="img1.png" alt="carousel 1" width="256px" height="256px" /> </div> <div class="slide"> <img src="img2.png" alt="carousel 2" width="256px" height="256px" /> </div> <div class="slide"> <img src="img1.png" alt="carousel 3" width="256px" height="256px" /> </div> <div class="slide"> <img src="img2.png" alt="carousel 4" width="256px" height="256px" /> </div> </div>

Javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$("#foo2").carouFredSel({
	auto : false,
        items: 2,
	prev : {	
		button	: "#foo2_prev",
		key		: "left"
	},
	next : { 
		button	: "#foo2_next",
		key		: "right"
	}
});

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
<div class="image_carousel">
	<div id="foo2">
		<img src="img1.png" alt="carousel 1" width="256" height="256" />
		<img src="img2.png" alt="carousel 2" width="256" height="256" />
		<img src="img3.png" alt="carousel 3" width="256" height="256" />
		<img src="img4.png" alt="carousel 4" width="256" height="256" />
	</div>
	<div class="clearfix"></div>
	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo2_next" href="#"><span>next</span></a>
</div>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.image_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 85px;
}
a.prev {			left: -22px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }
 
a.prev span, a.next span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}