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 38 solutions au

 

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

plugin jQuery pour creer un diaporama responsive

Références

Site web

Site de l'auteur

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

Blue Imp Gallery - Slider auto avec timbre

- Par Sebastian Tschan
- Tuto bien expliqué

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,.. Utilisation des attributs : "srcset" et "sizes"
  • Le plugin permet le slider vidéo. Voir service suivant

Image cliquable pour voir le slider

plugin pour un diaporama responsive et mobile friendly

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

plugin pour un diaporama video responsive et mobile friendly

Références

Site web

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

Dynamic Drive - Carrousel

- Pas responsive

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

diaporama reponsive plugin

Références

Site web

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

Light Gallery par Neravath Sachin

- Intégrer des images de tailles différentes est possible
- Système avec 'timbres' optionnel
- Dommage que les touches d'actions soient trop petites
- Sachin Neravath est développeur, auteur de nombreux projets 'open source' utilisés par des milliers d'entreprises dont Sony, Vogue, Hyundai, Airtel, Samsung, Lufthansa, etc...

Caractéristiques

  • Bibliothèque Javascript
  • Avec documentation d'installation
  • CSS, JS, jQuery, Picturefill.js
  • Mode automatique
  • Le diaporama occupe 100% de l'espace
  • Responsive avec l'utilisation des attributs : "srcset" et "sizes" (dans le Javascript)

Image cliquable pour voir le slider

diaporama responsive gratuit

Références

Site web

[Créé / modifié] [07-03-2021 / 07-03-2021]

Photo Swipe Master - Slider avec timbre

- Très pratique de pouvoir régler les 'timbres' dans un CSS 'à part'

Caractéristiques

  • Bibliothèque Javascript
  • Galerie d'images
  • Avec documentation d'installation
  • CSS, JS, Pas de jQuery ni autre dépendance
  • Boutons 'plein écran', 'zoom', 'partager'
  • Parfaitement mobile friendly. Gestion du mode reponsive dans le Javascript

Image cliquable pour voir le slider

galerie d'images mobile friendly

Références

Site web

Site de l'auteur

[Créé / modifié] [17-12-2020 / 09-03-2021]

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

bibliotheque JS, gratuit, pour installer un diaporama sur son site web

Références

Site web

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

Tympanus

- Intégrer des images de tailles différentes est possible
- Système avec 'timbres' optionnel

Caractéristiques

  • Bibliothèque JS
  • CSS, JS, Elastislide, Gallery.js
  • Pas de mode automatique
  • Texte en accompagnement de l'image
  • Les timbres sont gérés en bandeau défilant
  • Les flèches de navigation bougent verticalement en fonction de la taille de l'image, c'est désagréable
  • Le mode responsive est géré dans le Javascript avec l'attribut de l'image "data-large"

Image cliquable pour voir le slider

bibliotheque JS pour un diaporama d'images avec timbres

Références

Site web

[Créé / modifié] [06-03-2021 / 06-03-2021]

Woo Themes - Slider

- Site de https://woocommerce.com/

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
  • Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

bibliotheque JS pour slideshow

Références

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

Wow Slider - Logiciel

- Filigrane
- Logiciel gratuit à télécharger

Caractéristiques

  • Glisser déposer des images ou 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

logiciel de creation de diaporama

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

image slider avec template sur base bootstrap

Références

Site web

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

Azmind - Template

- Tuto
- Le slider est intégré à un template de site web

Caractéristiques

  • Avec Tuto
  • Mode automatique
  • CSS, Animate.css, Javascript, jQuery, Bootstrap 4.4
  • Pour images et vidéos
  • Flèches latérales pour passer d'une image à l'autre
  • Les flèches de navigation bougent verticalement en fonction de la taille de l'image, c'est désagréable

Image cliquable pour voir le slider

image slider avec template sur base bootstrap

Références

Site web

[Créé / modifié] [23-08-2020 / 09-03-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

image slider en css pur avec paramétrage

Références

Site web

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

Carvalho Bruno

- Ce slider est parfait : Beau et parfaitement responsive, même si ça fait lourd de code

Caractéristiques

  • Slider automatique
  • CSS, Normalize.css, Javascript, jQuery, TweenMax.js
  • Textes en suimpression avec transition douce
  • Les images ne sont pas toutes de taille identique
  • Responsive
  • Avec protection vis à vis du clic droit
  • Bruno Carvalho est ingénieur à Itatiba, au Brésil

Image cliquable pour voir le slider

slider responsive automatique avec tweenmax

Références

Site web

Site de l'auteur

[Créé / modifié] [22-03-2021 / 22-03-2021]

Carvalho Bruno 2

- Ce slider est parfait : Beau et parfaitement responsive

Caractéristiques

  • Slider manuel
  • CSS, Normalize.css, Javascript, Swiper.js
  • Textes en suimpression avec transition douce
  • Les images ne sont pas toutes de taille identique
  • Responsive
  • Avec protection vis à vis du clic droit

Image cliquable pour voir le slider

slider responsive manuel avec swiper

Références

Site web

[Créé / modifié] [22-03-2021 / 22-03-2021]

Carvalho Bruno 3

Caractéristiques

  • Slider automatique
  • CSS, Javascript, jQuery
  • Textes en suimpression avec transition douce
  • Les images ne sont pas toutes de taille identique
  • Responsive

Image cliquable pour voir le slider

slider responsive automatique avec CSS et jQuery

Références

Site web

[Créé / modifié] [22-03-2021 / 22-03-2021]

Chhokar Jaskiran

- 3D slider
- Pas responsive mais c'est tellement beau !

Caractéristiques

  • CSS pur
  • L'image réagit 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

Carrousel d'images en rotation permanente

Références

Site web

[Créé / modifié] [06-11-2020 / 09-03-2021]

Crofte Geoffrey

- Pas responsive
- N'accepte que les formats d'image 640X310

Caractéristiques

  • CSS, HTML, 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

slideshow automatic

Références

Site web

[Créé / modifié] [23-08-2020 / 10-03-2021]

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

slideshow automatic

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

tutoriel de slider en css pur

Références

Site web

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

Gonzalves Lm - Slider

- La présentation est intéressante mais les fonctionnalités sont limitées

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.
  • Pas responsive

Image cliquable pour voir le slider

slideshow automatic

Références

Site web

[Créé / modifié] [01-09-2020 / 10-03-2021]

Jing Chen Hui - Galerie

- La présentation est magnifique mais...
- ... fonctionne mal avec des tailles d'image différentes

Caractéristiques

  • CSS pur
  • Mode manuel
  • Slider vertival

Image cliquable pour voir le slider

images slider vertical

Références

Site web

[Créé / modifié] [06-11-2020 / 10-03-2021]

Khan Shamim

- Pas responsive
- Code pas pratique à extraire

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

Diaporama ou slideshow tres complet

Références

Site web

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

Khan Shamim 2 - Carrousel auto

- Beaucoup (trop) de logiciels utilisés

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

Carrousel automatique avec arret sur image et transitions

Voir cet autre Carrousel

Références

Site web

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

Khan Shamim 3 - Carrousel auto

- Beaucoup (trop) de logiciels utilisés

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

Carrousel automatique avec Bootstrap3.3

Références

Site web

[Créé / modifié] [30-12-2020 / 10-03-2021]

Nozdriukhin Alex

- Slider 3D avec perspective
- Vraiment responsive. C'est à dire que cet outil affiche autant d'images que nécessaire en fonction du couple densité/largeur d'écran. Très beau travail !
- L'image suit le curseur, comme un regard

Caractéristiques

  • Super effet 3D, belle présentation, très original et ludique
  • Pour voir l'image "à plat" il faut positionner le curseur au centre de l'image
  • CSS, Javascript, rien d'autre
  • Sur mobile la 3D est inopérante

Image cliquable pour voir le slider

slider doux en 3D avec perspective

Références

Site web

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

Odunsi Joseph - TUTO

- Ce slider, avec tuto, privilégie la simplicité et ça fait du bien

Caractéristiques

  • Slider automatique avec tuto
  • CSS, Javascript, rien d'autre
  • Responsive
  • Joseph Odunsi est ingénieur au Nigeria

Image cliquable pour voir le slider

slider automatique avec tutoriel

Références

Site web

Site du tuto

[Créé / modifié] [22-03-2021 / 22-03-2021]

Radu Bratan

Caractéristiques

  • Carrousel manuel : Soit on clique 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

Carrousel d'images avec Flickity

Références

Site web

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

Sampaio Glauber

- Très beau slider

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

Galerie d'images responsive

Références

Site web

Concept original

[Créé / modifié] [06-11-2020 / 10-03-2021]

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 tronquée
  • Magnifique présentation, à mon avis évidemment !
  • Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

le meilleur image slider en CSS

Références

Site web

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

Shackleton Zoe - Galerie

- Solution originale mais limitée en nombre d'images

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
  • Avec une seule image affichée on ne peut plus naviguer
  • Pas d'affichage de l'image 'en grand'

Image cliquable pour voir le slider

Galerie d'images responsive

Références

Site web

[Créé / modifié] [23-08-2020 / 10-03-2021]

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

diaporama d'images avec transitions et texte en surimpression

Références

Site web

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

SpotLight par Wilkerling Thomas

- Même s'il n'est pas prévu de gérer plusieurs images en fonction de le densité/format de l'écran, c'est un très bon service

Caractéristiques

  • Slider automatique avec arrêt au survol
  • Preloader, prérécupérer l'image suivante (tâche d'arrière-plan)
  • Flèches de navigation parfaites
  • Texte, numéro de l'image, zoom, mode automatique ou pas, tout est prévu
  • VU sur le site : Super-léger (7 Ko gzip (js + css + html + icônes)), performances exceptionnelles, pas de dépendances.

Image cliquable pour voir le slider

plugin javascript pour creer un diaporama d'images gratuit

Références

Site web

[Créé / modifié] [14-04-2021 / 14-04-2021]

Talanov Nikolay

- Très beau travail

Caractéristiques

  • Slider automatique sans possibilité d'arrêt sur image
  • CSS, Javascript, pas d'autre dépendance
  • 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

disporama d'images avec transitions et texte en surimpression

Références

Site web

[Créé / modifié] [19-01-2021 / 10-03-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

Carrousel d'images avec flèches de déplacement

Références

Site web

[Créé / modifié] [23-08-2020 / 10-03-2021]

Vo trung - Slider

- Très intéressant
- Mais il faut modifier le ".css" à chaque ajout d'image

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

Image cliquable pour voir le slider

Carrousel d'images avec flèches de déplacement

Références

Site web

[Créé / modifié] [01-11-2020 / 10-03-2021]

Wiky Ware Net

Carrousel avec effet de parallaxe, impressionnant !

Caractéristiques

  • Carrousel automatique
  • CSS, JS, jQuery, Flickity.pkgd.js
  • Arrêt au survol de la souris
  • Pas d'image agrandie

Image cliquable pour voir le slider

Carrousel d'images automatique avec effet de parallaxe

Références

Site web

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

Wiky Ware Net 2

Carrousel simple

Caractéristiques

  • Lancement automatique
  • CSS, Swiper.css, JS, jQuery, Swiper.js
  • Arrêt au survol de la souris
  • Pas d'image agrandie

Image cliquable pour voir le slider

Carrousel d'images automatique simple

Références

Site web

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