carouFredSel – Plugin jQuery – Le carrousel customisable

Je reviens avec un plugin jQuery permettant de réaliser un carrousel de manière efficace, rapide et adapté au besoin. En effet, carouFredSel est un plugin jQuery qui va vous permettre tout cela.

jquery-carousel-js-carouFredSel

Voici sa mise en place basique :

1- Appel des librairies qui vont être utilisées soit : jQuery et le plugin lui même :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>

2- Les images (si vous souhaitez utiliser des images) qui intégreront le carrousel. Mais vous pouvez y mettre du texte, une liste à puce ou tout autre élément html :

<div id="foo">
    <img src="img1.jpg" width="300" />
    <img src="img2.jpg" width="300" />
    <img src="img3.jpg" width="300" />
    <img src="img4.jpg" width="300" />
    <img src="img5.jpg" width="300" />
    <img src="img6.jpg" width="300" />
    <img src="img7.jpg" width="300" />
    <img src="img8.jpg" width="300" />
</div>

3- Lancement du plugin et votre carrousel devient effectif !!

$(document).ready(function() {

    // Using default configuration
    $("#foo").carouFredSel();

});

C’est simple, surtout si vous avez quelques notions d’utilisation du framework javascript jQuery (jquery.com).

Bien entendu, il existe de multiples options et moyens de customisation (voir la configuration).

Pour utiliser ce plugin jQuery, voici le lien direct vers le site carouFredSel : http://caroufredsel.dev7studios.com et le lien vers le téléchargement : http://dev7studios.com/downloads/60

Démo : http://caroufredsel.dev7studios.com/examples/basic-carousels.php

Articles qui peuvent vous intéresser :

No Responses

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*