Tiny Circleslider – Plugin jQuery – Le slider en cercle original

Posted By Franck Pertegas on 3 Août 2012 in Articles, Framework, Javascript, Programmation | 2 comments

Aujourd’hui pour la présentation d’un autre plugin jQuery, je vous fais découvrir Tiny Circleslider, un plugin jQuery plutôt original et qui change des sliders beaucoup plus classiques que l’on commence à voir fleurir sur la toile (ce qui est une bonne chose d’ailleurs). Mais avec Tiny Circleslider, vous allez pouvoir proposer à vos visiteurs, un défilement d’images dans un cercle et de manière fluide et agréable.

Afin de vous faire une idée, voici le lien vers le site, d’où vous pourrez admirer plusieurs démonstrations.

Ce plugin jQuery peut être paramétré avec diverses options et il fonctionne sur Iphone, Android et Ipad.

Pour l’utiliser, voici la méthode :

L’appel javascript avec jQuery :

[pastacode lang= »javascript » manual= »%24(‘%23rotatescroll1’).tinycircleslider()%3B » message= » » highlight= » » provider= »manual »/]

Et les balises qui seront impactées par le plugin jQuery :

[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22rotatescroll1%22%3E%0A%3Cdiv%20class%3D%22viewport%22%3E%0A%3Cul%20class%3D%22overview%22%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF1.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF2.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF3.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF4.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF5.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF6.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF7.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF8.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF9.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF10.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF11.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF12.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF13.jpg%22%20alt%3D%22%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF14.jpg%22%20%2F%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Cimg%20src%3D%22images%2FSF15.jpg%22%20%2F%3E%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22overlay%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22thumb%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

Et vous aurez votre effet de slider version cercle.

Retrouvez le plugin jQuery Tiny Circleslider

Et vous, que pensez vous de cet effet ?

Articles qui peuvent vous intéresser :

• 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 !
• pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique