Accueil » Tutoriels » JavaScript » Sélection de Slideshow et Carrousels

Sélection de Slideshow et Carrousels

Ayant récemment eu besoin de parcourir les ressources du web à la recherche d’une solution de slideshow simple et personnalisable, j’ai rencontré quelques bonnes choses. Voici une liste très largement non exhaustive de quelques slideshow et carrousels en JavaScript qui ont retenu mon attention par leur simplicité, leurs fonctionnalités ou la qualité de leur ergonomie.

Essayons de classer ces ressources, mais ça ne sera pas toujours facile.

Slideshow simple

Basic Slider

Voir Basic Slider

Plugin de jQuery – Gratuit
Basic Slider est un plugin robuste permettant d’insérer dans chaque slide un contenu varié : image, texte, image légendée, vidéo, code HTML riche, etc.

Voir les démonstrations Doc et téléchargement

SlidesJS

LE site de SlidesJS

Plugin de jQuery – Gratuit
SlidesJS est un plugin au design simple et élégant. Facile à personnaliser, il conviendra la plus plupart des utilisations.

Voir une démonstration Doc et téléchargement

WOW Slider

Télécharger WOW Slider

Plugin de jQuery – Gratuit (non-commercial), Payant (commercial, à partir de $69)

WOW Slider est un plugin robuste et, bien que simple d’apparence, propose des fonctionnalités très intéressantes comme la prévisualisation des différentes slides (visible sur la capture d’écran ci-dessus). Utilisé par de nombreux sites web, c’est un peu une référence dans le monde du slideshow.

Voir les démonstrations Téléchargement

Slideshow responsive

FlexSlider

Site du FlexSlider

Plugin de jQuery – Gratuit
Initialement conçu par MadeByMuffin, ce diaporama récemment acquis par WooThemes à la capacité de s’adapter à son environnement de consultation.

Voir la démonstration Le télécharger

BlueBerry

Télécharger BlueBerry

Plugin de jQuery – Gratuit
Développé par Mark Tyrrell, le slideshow BlueBerry est également un slideshow responsive.

Voir la démonstration Le télécharger

ResponsiveSlides JS

Télécharger ResponsiveSlides JS

Plugin de jQuery – Gratuit
Ce slideshow très simple et léger propose quelques options classiques (dont un bouton de mise en pause du slider) et est responsive.

Voir la démonstration Le télécharger

Swipe JS

Découvrir SwipeJS

Script JavaScript – Gratuit
Ce slideshow pensé très léger supporte le Swipe, cette action de glissé effectué sur un terminal tactile. Il n’est pas un plugin de jQuery, ce qui en fait un slideshow très intéressant pour ses performances.

Voir la démonstration Télécharger le script

Slideshow qui en jette

Estro Slider

Voir le slideshow Estro Slider

Plugin de jQuery – Payant ($12)

Un des rares plugins où j’ai croisé une option pour stopper l’animation. C’est quand même une des fonctionnalités qui devrait apparaitre par défaut dans tous les slideshow (ça n’engage que moi, m’enfin quand même). Ce plugin gère une foule de formats différents et permet l’insertion de vidéos.

Autres démonstrations L’acheter

Nivo Slider

Les démonstrations de Nivo Slider

Plugin de jQuery – Gratuit pour un usage personnel

Ces un des plugins qui chauffe le plus dans vos codes sources ces derniers temps. Vous l’appréciez notamment pour son jeu de découpe des images lors des transitions. Un effet très agréable à regarder, assurément.

Autres démonstrations Le télécharger

Royal Slider

Royal Slider sur Code Canyon

Plugin de jQuery – Payant ($12)

Ce plugin offre un design propre et soigné et propose une gestion des touch events (écrans tactiles). Le passage d’un slide à l’autre peut également se faire par drag and drop.
Les contenus de chaque slide peuvent être variés puisque le contenu HTML est pris en charge également.

Les démonstrations L’acheter

Skitter

Skitter Slider

Plugin de jQuery – Gratuit

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 écran, un petit loader, etc. A découvrir grâce à la démonstration customisable !
Un plugin WordPress est même disponible.

La démonstration Le télécharger

Effet 3D

C’était l’objet même de ma recherche de slideshow avec un léger reflet et un effet 3D un peu à la coverflow, mais en plus subtile. Mon client s’était fait maquetter quelque chose de ressemblant à ce premier carrousel (avec reflet et tout le tralala).

« ProfessorCloud » Carousel

Carrousel ProfessorCloud

Plugin de jQuery – Gratuit

Ce carrousel propose un effet de reflet créé avec Canvas (compatible IE9) sous les images. Possédant quelques options intéressantes (auto slide, prise en charge de la molette, etc.) les démonstrations proposées par le site officielle ne sont pas exceptionnelles graphiquement parlant (c’est mon avis).
Deux démonstrations qui ressortent un peu du lot : Inspyre et Dr Solutions qui sont également listées en fin de page du site officiel.

La démonstration Le télécharger

Waterwheel Carousel

WaterWheel Carrousel

Plugin de jQuery – Gratuit

Ne vous y trompez pas, malgré la simplicité de sa présentation, les possibilités de ce carrousel sont vraiment intéressantes. Outre les nombreuses options du plugin, avec quelques retouches du cœur il est possible d’y intégrer d’autres éléments HTML et de le rendre adaptable aux différentes résolutions d’écran.

Les démonstrations Le télécharger

Coverscroll

Coverscroll

Plugin de jQuery – Gratuit

Quelques images, quelques lignes de code, un peu de CSS et l’activation du script fait le reste. Un effet très sympathique.
Dommage qu’aucun package ne soit téléchargeable avec davantage de démonstrations.

La démonstration Télécharger le script

RoundAbout

RoundAbout carrousel

Plugin de jQuery – Gratuit

Un des scripts que j’ai préféré voir fonctionner lors de ma recherche. Cependant sur certaines configurations, ce script rame énormément et les mouvements de l’animation sont quelque peu saccadés.
À ne surtout pas utiliser dans le cadre d’un besoin d’adaptation sur smartphone ou tablette.

La démonstration Télécharger le plugin

CCSlider

CCSlider

Plugin de jQuery – Payant ($12)

Un des plugins les plus sophistiqué dans ses effets de transition. De la découpe, de la 3D, de l’effet de profondeur à t’en donner le tournis, mais c’est vrai que ça déchire quand même pas mal !

Les démonstrations Acheter le plugin

Flux Slider

Découvrir Flux Slider

Plugin de jQuery – Gratuit

Un plugin qui propose les mêmes effets que les précédents, mais en mettant en avant des transitions CSS3 favorisant l’accélération matériel (et donc la fluidité des animations). Une extension WordPress existe pour ce plugin !

La démonstration Télécharger le plugin

Tutoriels

Juste pour compléter cet article et ne pas vous laisser sur des choses toutes faites, voici un tutoriel couplé à des sources téléchargeables pour la création d’un slideshow avec HTML5, Canvas et jQuery.

Tutoriel de slideshow HTML5 et Canvas

Plugin de jQuery – Tutoriel + plugin

La démonstration Télécharger les sources

Si vous avez d’autres ressources à me proposer, je suis disposé à compléter cette liste, bien entendu ?

Merci déjà à :

Pour leur contribution ?

À propos Amine MAGDICH

Animé par l'envie d'entreprendre, je déborde de curiosité pour le numérique et les nouvelles technologies. Sans cesse à la recherche de savoir, je pousse ma capacité d'apprentissage à son maximum, afin d'obtenir des compétences globales, répondant aux enjeux de la gestion humaine et technique d'un projet multimédia.

Laisser une réponse

x

Check Also

Créer un menu sticky avec JavaScript et CSS

J’ai bossé récemment sur plusieurs sites web, et la requête d’un menu sticky était quasiment ...

Récupérer les paramètres GET d’une URL avec JavaScript

Cela peut sembler bête, mais dans la même semaine on m’a posé deux fois cette ...