Diaporama (slideshow), Carrousel, galerie d'images en CSS, HTML, Javascript, jQuery (+Bootstrap)

Présentation

Pour rendre votre site web plus joyeux, plus beau et plus original, en un mot plus attractif, faites votre diaporama(images slider).

Deux catégories : La première présente les plugins à utiliser pour créer votre diaporama, la deuxième offre le code source intégral

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 34 solutions au 05 03 2021

Bibliothèque, plugin, logiciel à télécharger
1. Adaptor de Parsons PhilSlider (jQuery)
2. Blue Imp GallerySlider auto avec timbre (JS)
3. Blue Imp GallerySlider vidéo (JS)
4. Dynamic DriveCarrousel (jQuery)
5. Photo Swipe MasterSlider avec timbre (JS)
6. Sequence.jsSlider (JS)
7. Woo ThemesSlider (JS)
8. Wow SliderLogiciel

Code à disposition
1. Ainalem MikaelSlider auto (JS)
2. AzmindTemplate (CSS; JS; jQuery; Bootstrap)
3. Braam PaulSlider (JS)
4. Bué MatthieuSlider auto (CSS pur)
5. Caqueux NicolasSlider (CSS; jQuery)
6. Chhokar JaskiranCarrousel auto (CSS pur)
7. Crofte GeoffreySlider auto (CSS; jQuery)
8. CssSlider.comSlider auto (CSS; jQuery)
9. Developpez.comGalerie (CSS pur)
10. Gonzalves LmSlider (CSS; jQuery)
11. Jing Chen HuiGalerie (CSS pur)
12. Khan ShamimSlider auto (JS, jQuery)
13. Khan Shamim 2Carrousel auto (JS, jQuery)
14. Khan Shamim 3Carrousel auto (JS, jQuery)
15. Nozdriukhin AlexSlider (JS)
16. Radu BratanSlider (JS, jQuery)
17. Sampaio GlauberSlider auto (CSS, )
18. Saran VikramSlider (JS)
19. Shackleton ZoeGalerie (CSS; Javascript; jQuery)
20. Smith JohnSlider (JS)
21. Talanov NikolaySlider (JS)
22. Valladares DobladoCarrousel (CSS; Javascript; jQuery)
23. Van Thanh DangSlider (CSS pur)
24. Vo TrungSlider (CSS pur)
25. Wiky Ware NetSlider (JS, jQuery)
26. Wiky Ware Net 2Slider (JS, jQuery)

Télécharger une bibliothéque, un plugin pour créer votre diaporama

Adaptor par Parsons Phil

- Logiciel ancien mais récemment mis à niveau

Caractéristiques

Bibliothèque jQuery
Transitions 3D
Impeccablement responsive
Impeccable, tout court

Image cliquable pour voir le slider

Références

Site web

Site de l'auteur

[Créé / modifié] [20-11-2020 / 20-11-2020]

Blue Imp Gallery - Slider auto avec timbre

Caractéristiques

Développé par Sebastian Tschan
Bibliothèque Javascript
Avec documentation d'installation
CSS; JS; jQuery, Vendor.js
Possibilité de démarrer en mode plein écran
Choix entre mode automatique et manuel
Il faut cliquer pour voir l'image en grand
Responsive, mobile friendly,..
Le plugin permet le slider vidéo. Voir service suivant

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [17-12-2020 / 17-12-2020]

Blue Imp Gallery

- Slider vidéo

Caractéristiques

Développé par Sebastian Tschan
Bibliothèque Javascript
Avec documentation d'installation
CSS; JS; jQuery, Vendor.js
Mode manuel
Responsive, mobile friendly,..

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [17-12-2020 / 17-12-2020]

Dynamic Drive - Carrousel

- Avec le mode automatique ce serait 10/10

Caractéristiques

Bibliothèque Javascript
Avec documentation d'installation
CSS; JS; Sly.js
Il faut cliquer pour passer d'une image à l'autre
Il faut cliquer pour voir l'image en grand

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [15-12-2020 / 15-12-2020]

Photo Swipe Master - Slider avec timbre

Caractéristiques

Bibliothèque Javascript
Galerie d'images
Avec documentation d'installation
CSS; JS; Snf1yod.js
Il faut cliquer pour passer d'une image à l'autre
Il faut cliquer pour voir l'image en grand
Boutons 'plein écran', 'zoom', 'partager'
Parfaitement mobile friendly

Image cliquable pour voir le slider

Références

Site web

Site de l'auteur

[Créé / modifié] [17-12-2020 / 17-12-2020]

Sequence.js

- Magnifique SlideShow

Caractéristiques

Bibliothèque
CSS, JS
Pas de mode automatique
Réaction de la flèche au survol
Texte en surcharge
En mode mobile le texte est en dessous
Modification pour initié : Ce thème comprend un fichier Sass et un environnement de développement automatisé via Grunt.js.

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [20-11-2020 / 20-11-2020]

Woo Themes - Slider

Caractéristiques

Bibliothèque
CSS, JS, Modernizr.js, jQuery
Juste un appel à la fonction "flexslider"
Défilement automatique, arrêt au survol d'une image
Apparition des flèches de défilement au survol d'une image ou d'un icône de défilement
Flèches visibles en permanance en mode mobile
Site de https://woocommerce.com/
Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

Références

[Créé / modifié] [20-11-2020 / 20-11-2020]

Wow Slider - Logiciel

- Filigrane

Caractéristiques

Logiciel gratuit à télécharger
Glisser déposer des images ou d'un dossier d'images
Vous choisissez un template de présentation : Ici template "Absent"
Vous choisissez un effet de transition : Ici "Shift"
Défilement automatique, arrêt au clic
Apparition des flèches de défilement au survol d'une image
Une fois ces qques éléments choisis vous publiez et obtenez un code à intégrer à votre page.
Enfantin voire extra

Image cliquable pour voir le slider

Références

[Créé / modifié] [11-01-2021 / 11-01-2021]

Code source à disposition pour diaporama d'images

Ainalem Mikael

Caractéristiques

Javascript et CSS
Mode automatique seulement
Série de clips
Bluffant mais inutilisable pour le commun des mortels

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [13-10-2020 / 13-10-2020]

Azmind - Template

- Tuto

Caractéristiques

Template
Avec Tuto
Javascript; jQuery; Bootstrap
Pour images et vidéos
Flèches latérales pour passer d'une image à l'autre

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [23-08-2020 / 23-08-2020]

Braam Paul

Caractéristiques

CSS, Tether.css, Socicon.css, Mobirise.css, jQuery, SmoothScroll.js, etc...
Bootstrap 4.0
Fonctionnement automatique avec 'pause' au survol de la souris
D'autres sliders sur la même page, en dessous
Parfaitement intégré et responsive

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [01-02-2021 / 01-02-2021]

Bué Matthieu alias Twikito

Caractéristiques

CSS pur
Fonctionnement automatique avec 'pause' au survol de la souris
Les paramètres principaux sont nommés sur les images
Parfaitement responsive

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [09-11-2020 / 09-11-2020]

Caqueux Nicolas - Slider

Caractéristiques

CSS (+ animate.css); jQuery
Design: Olya Marchak
Diaporama pour texte avec trois transitions
Flèches latérales pour passer d'une image à l'autre
Pas de mode automatique

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [23-08-2020 / 23-08-2020]

Chhokar Jaskiran

- Pas responsive

Caractéristiques

CSS pur
L'image n'est pas agrandie au passage de la souris
On peut modifier la vitesse de rotation
Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [06-11-2020 / 06-11-2020]

Crofte Geoffrey

- Pas responsive

Caractéristiques

CSS3; HTML5; jQuery
Mode automatique (arrêt/marche)
Flèches latérales pour passer d'une image à l'autre
Légende sur l'image avec transition
Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [23-08-2020 / 23-08-2020]

CssSlider.com - Slider auto

Caractéristiques

Logiciel en téléchargement gratuit (avec philigrane)
Pas de Javascript ni de jQuery
Mode automatique (arrêt/marche)
Flèches latérales pour passer d'une image à l'autre
Légende sur l'image
Visualisation des images non affichées en mode timbre sur les petits boutons en bas au milieu

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [13-10-2020 / 13-10-2020]

Developpez.com

- Pas responsive

Caractéristiques

Avec Tuto
CSS pur
Effet de zoom
Bouton de fermeture sur l'image zoomée

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [23-08-2020 / 23-08-2020]

Gonzalves Lm - Slider

Caractéristiques

Avec tuto
CSS; HTML; JS; Normalize
Mode manuel
Barres pour passer d'une image à l'autre
La conception originale appartient à Francesco Zagami, et est publiée dans Dribbble.

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [01-09-2020 / 01-09-2020]

Jing Chen Hui - Galerie

Caractéristiques

CSS pur
Mode manuel
Slider vertival

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [06-11-2020 / 06-11-2020]

Khan Shamim

- Pas responsive

Caractéristiques

Slider automatique sans arrêt au survol
CSS; Normalize.css; Slider-pro.css; Javascript; jQuery; Slider-Pro.js
Apparition des flèches d'avancement au survol
Boutons de circulation et d'accès direct en bas
Texte en surimpression

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [03-12-2020 / 03-12-2020]

Khan Shamim 2 - Carrousel auto

Caractéristiques

Carrousel automatique avec arrêt au survol
CSS; Normalize.css; Owl.Carrousel.css; Javascript; jQuery; Owl.Carrousel.js; Bootstrap
Boutons de circulation et d'accès direct en bas
Belle transition
Pas d'affichage de l'image 'en grand'
Génial pour la présentation d'une équipe

Image cliquable pour voir le slider

Voir cet autre Carrousel

Références

Site web

[Créé / modifié] [03-12-2020 / 03-12-2020]

Khan Shamim 3 - Carrousel auto

Caractéristiques

Carrousel automatique avec arrêt au survol et avec légende animée
CSS; Normalize.css; Animate..css; Javascript; jQuery; Bootstrap 3.3
Boutons de circulation et d'accès direct en bas

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [30-12-2020 / 30-12-2020]

NozdriukhinAlex

- Slider 3D avec perspective

Caractéristiques

Super effet 3D, belle présentation, très original et ludique mais à un moment donné on ne sait plus comment se débarrasser du système pour regarder tranquillement l'image "à plat"
CSS; Javascript, rien d'autre
Sur mobile la 3D est inopérante
Responsive. Chapeau !

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [01-02-2021 / 01-02-2021]

Radu Bratan

Carrousel moderne

Caractéristiques

Carrousel manuel : Soit onclique sur l'image et elle se positionne, soit on l'attrape avec la souris pour l'amener au centre
CSS, Normalize.css, JS, Flickity.js
Manque le défilement automatique et l'agrandissement de l'image

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [11-02-2021 / 11-02-2021]

Sampaio Glauber

Caractéristiques

Slider automatique avec transition
CSS; Normalize.css; Javascript; Modernizr.js, TweenMax.js
Animation de la durée d'affichage d'une image
On ne peut pas intervenir pour passer les images
Original et sympa

Image cliquable pour voir le slider

Références

Site web

Concept original

[Créé / modifié] [06-11-2020 / 06-11-2020]

Saran Vikram

- Alias Vikram Codes
- Superbe !

Caractéristiques

CSS avec très peu de Javascript
Fonctionnement manuel avec les deux flèches du même côté
Responsive mais l'image est ytronquée
Magnifique présentation, à mon avis évidemment !
Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [09-11-2020 / 09-11-2020]

Shackleton Zoe - Galerie

Caractéristiques

Galerie d'images
CSS; Normalize; Javascript; jQuery
L'image s'affiche lorsque l'on clique sur le timbre
Le nombre d'images dépend de la largeur de l'écran
Beau travail
Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [23-08-2020 / 23-08-2020]

Smith John

- Très élégant

Caractéristiques

Slider automatique avec arrêt au survol
CSS; Javascript, Hammer.js
Flèches de navigation discrètes
En bas à droite , texte en surimpression

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [21-01-2021 / 21-01-2021]

Talanov Nikolay

- Très beau travail

Caractéristiques

Slider automatique sans possibilité d'arrêt sur image
CSS; Javascript
Unité de couleur par image
En plus de l'image qui glisse de la droite vers la gauche il y a en surimpression un cadre animé ainsi qu'un texte
En bas à droite un compte à rebours du "temps qui reste pour l'image" est particulièrement bien vu

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [19-01-2021 / 19-01-2021]

Valladares Doblado - Carrousel

- Beau travail

Caractéristiques

Carrousel
CSS; Javascript; jQuery
Navigation en cliquant sur l'image ou sur les zones de défilement
Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [23-08-2020 / 23-08-2020]

Van Thanh Dang

- Pas responsive. Dommage le travail est trè propre !

Caractéristiques

CSS pur
Navigation en cliquant sur les flèches de défilement ou sur les point au centre bas des images
Belle transition d'image à image
Manque le défilement automatique

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [01-11-2020 / 01-11-2020]

Vo trung - Slider

Caractéristiques

Responsive Slideshow / Carrousel avec seulement HTML5 & CSS3
CSS pur
Navigation en cliquant sur les flèches de défilement ou sur les point au centre bas des images
Manque le défilement automatique