carouFredSel – Plugin jQuery – Le carrousel customisable

Posted By Franck Pertegas on 17 Oct 2012 in Articles, Framework, Javascript, Programmation | 1 comment

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.

Voici sa mise en place basique :

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

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery.carouFredSel.js%22%3E%3C%2Fscript%3E%0A » message= » » highlight= » » provider= »manual »/]

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 :

[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22foo%22%3E%3Cimg%20src%3D%22img1.jpg%22%20width%3D%22300%22%20%2F%3E%0A%3Cimg%20src%3D%22img2.jpg%22%20width%3D%22300%22%20%2F%3E%0A%3Cimg%20src%3D%22img3.jpg%22%20width%3D%22300%22%20%2F%3E%0A%3Cimg%20src%3D%22img4.jpg%22%20width%3D%22300%22%20%2F%3E%0A%3Cimg%20src%3D%22img5.jpg%22%20width%3D%22300%22%20%2F%3E%0A%3Cimg%20src%3D%22img6.jpg%22%20width%3D%22300%22%20%2F%3E%0A%3Cimg%20src%3D%22img7.jpg%22%20width%3D%22300%22%20%2F%3E%0A%3Cimg%20src%3D%22img8.jpg%22%20width%3D%22300%22%20%2F%3E%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »%24(document).ready(function()%20%7B%0A%0A%2F%2F%20Using%20default%20configuration%0A%24(%22%23foo%22).carouFredSel()%3B%0A%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

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 :

• Tiny Circleslider – Plugin jQuery – Le slider en cercle original
• jNotify – Plugin jQuery – La notification à portée de clic
• DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
• Flux Slider – Plugin jQuery – La transition d’image à effets multiples
• 50 Plugins jQuery pour vos sites web !