{"id":2576,"date":"2012-06-14T23:01:39","date_gmt":"2012-06-14T21:01:39","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2576"},"modified":"2015-01-03T19:10:13","modified_gmt":"2015-01-03T18:10:13","slug":"selection-slideshow-carrousels-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/selection-slideshow-carrousels-javascript","title":{"rendered":"S\u00e9lection de Slideshow et Carrousels"},"content":{"rendered":"

Ayant r\u00e9cemment eu besoin de parcourir les ressources du web \u00e0 la recherche d’une solution de slideshow simple et personnalisable, j’ai rencontr\u00e9 quelques bonnes choses. Voici une liste tr\u00e8s largement non exhaustive de quelques slideshow et carrousels en JavaScript qui ont retenu mon attention par leur simplicit\u00e9, leurs fonctionnalit\u00e9s ou la qualit\u00e9 de leur ergonomie.<\/p>\n

Essayons de classer ces ressources, mais \u00e7a ne sera pas toujours facile.<\/p>\n

Slideshow simple<\/h2>\n

Basic Slider<\/a><\/h3>\n

\"Voir<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong>
\nBasic Slider est un plugin robuste permettant d’ins\u00e9rer dans chaque slide un contenu vari\u00e9 : image, texte, image l\u00e9gend\u00e9e, vid\u00e9o, code HTML riche, etc.<\/p>\n

Voir les d\u00e9monstrations<\/a> Doc et t\u00e9l\u00e9chargement<\/a><\/p>\n

SlidesJS<\/a><\/h3>\n

\"LE<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong>
\nSlidesJS est un plugin au design simple et \u00e9l\u00e9gant. Facile \u00e0 personnaliser, il conviendra la plus plupart des utilisations.<\/p>\n

Voir une d\u00e9monstration<\/a> Doc et t\u00e9l\u00e9chargement<\/a><\/p>\n

WOW Slider<\/a><\/h3>\n

\"T\u00e9l\u00e9charger<\/a><\/p>\n

Plugin de jQuery – Gratuit (non-commercial), Payant (commercial, \u00e0 partir de $69)<\/strong><\/p>\n

WOW Slider est un plugin robuste et, bien que simple d’apparence, propose des fonctionnalit\u00e9s tr\u00e8s int\u00e9ressantes comme la pr\u00e9visualisation des diff\u00e9rentes slides (visible sur la capture d’\u00e9cran ci-dessus). Utilis\u00e9 par de nombreux sites web, c’est un peu une r\u00e9f\u00e9rence dans le monde du slideshow.<\/p>\n

Voir les d\u00e9monstrations<\/a> T\u00e9l\u00e9chargement<\/a><\/p>\n

Slideshow responsive<\/h2>\n

FlexSlider<\/a><\/h3>\n

\"Site<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong>
\nInitialement con\u00e7u par MadeByMuffin<\/a>, ce diaporama r\u00e9cemment acquis par WooThemes \u00e0 la capacit\u00e9 de s’adapter \u00e0 son environnement de consultation.<\/p>\n

Voir la d\u00e9monstration<\/a> Le t\u00e9l\u00e9charger<\/a><\/p>\n

BlueBerry<\/a><\/h3>\n

\"T\u00e9l\u00e9charger<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong>
\nD\u00e9velopp\u00e9 par Mark Tyrrell<\/a>, le slideshow BlueBerry est \u00e9galement un slideshow responsive.<\/p>\n

Voir la d\u00e9monstration<\/a> Le t\u00e9l\u00e9charger<\/a><\/p>\n

ResponsiveSlides JS<\/a><\/h3>\n

\"T\u00e9l\u00e9charger<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong>
\nCe slideshow tr\u00e8s simple et l\u00e9ger propose quelques options classiques (dont un bouton de mise en pause du slider) et est responsive.<\/p>\n

Voir la d\u00e9monstration<\/a> Le t\u00e9l\u00e9charger<\/a><\/p>\n

Swipe JS<\/a><\/h3>\n

\"D\u00e9couvrir<\/a><\/p>\n

Script JavaScript – Gratuit<\/strong>
\nCe slideshow pens\u00e9 tr\u00e8s l\u00e9ger supporte le Swipe, cette action de gliss\u00e9 effectu\u00e9 sur un terminal tactile. Il n’est pas un plugin de jQuery, ce qui en fait un slideshow tr\u00e8s int\u00e9ressant pour ses performances.<\/p>\n

Voir la d\u00e9monstration<\/a> T\u00e9l\u00e9charger le script<\/a><\/p>\n

Slideshow qui en jette<\/h2>\n

Estro Slider<\/a><\/h3>\n

\"Voir<\/a><\/p>\n

Plugin de jQuery – Payant ($12)<\/strong><\/p>\n

Un des rares plugins o\u00f9 j’ai crois\u00e9 une option pour stopper l’animation. C’est quand m\u00eame une des fonctionnalit\u00e9s qui devrait apparaitre par d\u00e9faut dans tous les slideshow (\u00e7a n’engage que moi, m’enfin quand m\u00eame). Ce plugin g\u00e8re une foule de formats diff\u00e9rents et permet l’insertion de vid\u00e9os.<\/p>\n

Autres d\u00e9monstrations<\/a> L’acheter<\/a><\/p>\n

Nivo Slider<\/a><\/h3>\n

\"Les<\/a><\/p>\n

Plugin de jQuery – Gratuit pour un usage personnel<\/strong><\/p>\n

Ces un des plugins qui chauffe le plus dans vos codes sources ces derniers temps. Vous l’appr\u00e9ciez notamment pour son jeu de d\u00e9coupe des images lors des transitions. Un effet tr\u00e8s agr\u00e9able \u00e0 regarder, assur\u00e9ment.<\/p>\n

Autres d\u00e9monstrations<\/a> Le t\u00e9l\u00e9charger<\/a><\/p>\n

Royal Slider<\/a><\/h3>\n

\"Royal<\/a><\/p>\n

Plugin de jQuery – Payant ($12)<\/strong><\/p>\n

Ce plugin offre un design propre et soign\u00e9 et propose une gestion des touch events (\u00e9crans tactiles). Le passage d’un slide \u00e0 l’autre peut \u00e9galement se faire par drag and drop.
\nLes contenus de chaque slide peuvent \u00eatre vari\u00e9s puisque le contenu HTML est pris en charge \u00e9galement.<\/p>\n

Les d\u00e9monstrations<\/a> L’acheter<\/a><\/p>\n

Skitter<\/a><\/h3>\n

\"Skitter<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong><\/p>\n

Simple d’aspect, ce plugin est un petit bijou proposant un grand nombre d’effets de transition et d’options. Le bouton stop, le bouton plein \u00e9cran, un petit loader, etc. A d\u00e9couvrir gr\u00e2ce \u00e0 la d\u00e9monstration customisable !
\nUn plugin WordPress est m\u00eame disponible.<\/p>\n

La d\u00e9monstration<\/a> Le t\u00e9l\u00e9charger<\/a><\/p>\n

Effet 3D<\/h2>\n

C’\u00e9tait l’objet m\u00eame de ma recherche de slideshow avec un l\u00e9ger reflet et un effet 3D un peu \u00e0 la coverflow, mais en plus subtile. Mon client s’\u00e9tait fait maquetter quelque chose de ressemblant \u00e0 ce premier carrousel (avec reflet et tout le tralala).<\/p>\n

\u00ab\u00a0ProfessorCloud\u00a0\u00bb Carousel<\/a><\/h3>\n

\"Carrousel<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong><\/p>\n

Ce carrousel propose un effet de reflet cr\u00e9\u00e9 avec Canvas (compatible IE9) sous les images. Poss\u00e9dant quelques options int\u00e9ressantes (auto slide, prise en charge de la molette, etc.) les d\u00e9monstrations propos\u00e9es par le site officielle ne sont pas exceptionnelles graphiquement parlant (c’est mon avis).
\nDeux d\u00e9monstrations qui ressortent un peu du lot : Inspyre<\/a> et Dr Solutions<\/a> qui sont \u00e9galement list\u00e9es en fin de page du site officiel.<\/p>\n

La d\u00e9monstration<\/a> Le t\u00e9l\u00e9charger<\/a><\/p>\n

Waterwheel Carousel<\/a><\/h3>\n

\"WaterWheel<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong><\/p>\n

Ne vous y trompez pas, malgr\u00e9 la simplicit\u00e9 de sa pr\u00e9sentation, les possibilit\u00e9s de ce carrousel sont vraiment int\u00e9ressantes. Outre les nombreuses options du plugin, avec quelques retouches du c\u0153ur il est possible d’y int\u00e9grer d’autres \u00e9l\u00e9ments HTML et de le rendre adaptable aux diff\u00e9rentes r\u00e9solutions d’\u00e9cran.<\/p>\n

Les d\u00e9monstrations<\/a> Le t\u00e9l\u00e9charger<\/a><\/p>\n

Coverscroll<\/a><\/h3>\n

\"Coverscroll\"<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong><\/p>\n

Quelques images, quelques lignes de code, un peu de CSS et l’activation du script fait le reste. Un effet tr\u00e8s sympathique.
\nDommage qu’aucun package ne soit t\u00e9l\u00e9chargeable avec davantage de d\u00e9monstrations.<\/p>\n

La d\u00e9monstration<\/a> T\u00e9l\u00e9charger le script<\/a><\/p>\n

RoundAbout<\/a><\/h3>\n

\"RoundAbout<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong><\/p>\n

Un des scripts que j’ai pr\u00e9f\u00e9r\u00e9 voir fonctionner lors de ma recherche. Cependant sur certaines configurations, ce script rame \u00e9norm\u00e9ment et les mouvements de l’animation sont quelque peu saccad\u00e9s.
\n\u00c0 ne surtout pas utiliser dans le cadre d’un besoin d’adaptation sur smartphone ou tablette.<\/p>\n

La d\u00e9monstration<\/a> T\u00e9l\u00e9charger le plugin<\/a><\/p>\n

CCSlider<\/a><\/h3>\n

\"CCSlider\"<\/a><\/p>\n

Plugin de jQuery – Payant ($12)<\/strong><\/p>\n

Un des plugins les plus sophistiqu\u00e9 dans ses effets de transition. De la d\u00e9coupe, de la 3D, de l’effet de profondeur \u00e0 t’en donner le tournis, mais c’est vrai que \u00e7a d\u00e9chire quand m\u00eame pas mal !<\/p>\n

Les d\u00e9monstrations<\/a> Acheter le plugin<\/a><\/p>\n

Flux Slider<\/a><\/h3>\n

\"D\u00e9couvrir<\/a><\/p>\n

Plugin de jQuery – Gratuit<\/strong><\/p>\n

Un plugin qui propose les m\u00eames effets que les pr\u00e9c\u00e9dents, mais en mettant en avant des transitions CSS3 favorisant l’acc\u00e9l\u00e9ration mat\u00e9riel (et donc la fluidit\u00e9 des animations). Une extension WordPress existe pour ce plugin !<\/p>\n

La d\u00e9monstration<\/a> T\u00e9l\u00e9charger le plugin<\/a><\/p>\n

Tutoriels<\/h2>\n

Juste pour compl\u00e9ter cet article et ne pas vous laisser sur des choses toutes faites, voici un tutoriel coupl\u00e9 \u00e0 des sources t\u00e9l\u00e9chargeables pour la cr\u00e9ation d’un slideshow avec HTML5, Canvas et jQuery<\/a>.<\/p>\n

\"Tutoriel<\/a><\/p>\n

Plugin de jQuery – Tutoriel + plugin<\/strong><\/p>\n

La d\u00e9monstration<\/a> T\u00e9l\u00e9charger les sources<\/a><\/p>\n

Si vous avez d’autres ressources \u00e0 me proposer, je suis dispos\u00e9 \u00e0 compl\u00e9ter cette liste, bien entendu \ud83d\ude42<\/p>\n

Merci d\u00e9j\u00e0 \u00e0 :<\/p>\n