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>


Aucune note. Soyez le premier à attribuer une note !