Carroufredsel
Ulisation du plugins CaroufredSel (voir le custom sur le site de caroufredsel)








le code :
Dans votre css ajouter :
.image_carousel {
padding: 15px 0 15px 40px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
Dans l'Editeur HTML
<script type="text/javascript" src="http://bidouillage.e-monsite.com/medias/files/jquery.js"></script>
<script type="text/javascript" src="http://bidouillage.e-monsite.com/medias/files/jquery-caroufredsel-5-5-5.js"></script>
<div id="foo">
<img src="IMG1.jpg" alt="" width="320" height="240" />
<img src="IMG2.jpg" alt="" width="320" height="240" />
<img src="IMG3.jpg" alt="" width="320" height="240" />
<img src="IMG4.jpg" alt="" width="320" height="240" />
<img src="IMG5.jpg" alt="" width="320" height="240" />
<img src="IMG6.jpg" alt="" width="320" height="240" />
<img src="IMG7.jpg" alt="" width="320" height="240" />
<img src="IMG8.jpg" alt="" width="320" height="240" />
</div>
<script type="text/javascript">
// <![CDATA[
$("#foo").carouFredSel();
// ]]>
</script>
Ce plugins permet beaucoup plus...
Quelques options:
la direction gauche ou droite
le delai de défilement
L'arrêt quand la souris passe sur une image
dans ce cas il suffit de changer le script
<script type="text/javascript">
// <![CDATA[
$("#foo").carouFredSel({
direction : "right",
duration : 600,
scroll:{
fx : "crossfade",
easing :"linear",
pauseOnHover :true
}
});
// ]]>
</script>







