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 43 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]

Css Script

- Superbe mais pas vraiment responsive

Caractéristiques

  • Accès direct ou par suivant/précédent
  • Transition douce d'affichage de l'image
  • Glissement par la gauche du titre et du texte

Image cliquable pour voir le slider

plugin CSS

Références

Site web

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

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]

Light Box par Dhakar Lokesh

- Dommage que l'ensemble ne soit pas prévu pour fonctionner agréablement sur mobile

Caractéristiques

  • CSS, JS, jQuery, Sizzle.js
  • À base de miniatures
  • Flèche de défilement sur l'image
  • Si la taille de l'image change il faut, à chaque fois, positionner la souris sur la flèche

Image cliquable pour voir le slider

slideshow a telecharger sur github

Références

Site web

Site de l'auteur

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

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]

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 en CSS pur

Brynjulfsen Havard - Bergen, Norvège

Caractéristiques

  • CSS pur
  • Carrousel sans aggrandissement de l'image
  • Superposition des images du diaporama en utilisant la position : 'sticky'
  • Faire défiler avec l'ascenseur de gauche à droite ou de droite à gauche

Image cliquable pour voir le slider

Carrousel avec superposition des images

Références

Site web

Site de l'auteur

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

Buljan Roko C. - Croatie

Caractéristiques

  • CSS pur
  • Fonctionnement manuel
  • Reste à matérialiser les flèches
  • Parfaitement responsive

Image cliquable pour voir le slider

image slider en css pur avec paramétrage

Références

Site web

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

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]

Coyle Louis - Hawke's Bay, New Zealand

Caractéristiques

  • CSS pur
  • Simple défilement vers le bas plutôt qu'un slideshow

Image cliquable pour voir le slider

defilement vertical

Références

Site web

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

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]

Moreira Moreno Abel Daniel - Slider

Caractéristiques

  • CSS pur
  • Simple et entièrement réactif
  • Navigation en cliquant sur les flèches de défilement ou sur les traits juste sous les images
  • Manque le défilement automatique

Image cliquable pour voir le slider

Slider d'images avec flèches de defilement

Références

Site web

Site de l'auteur

[Créé / modifié] [24-10-2020 / 24-10-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 points 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]

 

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

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]

Arseny M.

- Slider à défilement vertical

Caractéristiques

  • CSS, JS, Gsap.js
  • Présentation originale et agréable. Joli curseur
  • Le défilement est manuel et s'opère en trois parties
  • Parfaitement responsive
  • Le concepteur habite Moscou

Image cliquable pour voir le slider

Slider a defilement vertical multiple

Références

Site web

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

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]

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]

Circular Slider par KeyFramers

- Circular slider
- Import de ReactDOM et de React

Caractéristiques

  • CSS, Normalize, JS, React
  • Présentation originale
  • Le cercle en rotation devrait être beaucoup plus discret, à mon avis
  • Responsive

Image cliquable pour voir le slider

Circular slider

Références

Site web

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

Faria Rafael - Sao Paulo - Brésil

Caractéristiques

  • CSS, JS, jQuery, Carousel.js
  • Progression par clic sur le timbre
  • Les timbres apparaissent en transparence sur l'image
  • mobile firendly

Image cliquable pour voir le slider

Carrousel avec timbres en transparence

Références

Site web

[Créé / modifié] [09-10-2021 / 09-10-2021]

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]

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]

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]

Odyntsov Ivan

- Ce Carrousel est exemplaire

Caractéristiques

  • SCSS, Javascript, React.js, Prop-types.js, Ramda.js
  • Responsive
  • Un doucle clic sur l'image l'affiche en grand avec un texte explicatif

Image cliquable pour voir le slider

Magnifique Carrousel

Références

Site web

Site de l'auteur

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

Tran Hoang

- Carrousel 3D
- Avec 2h de musique !

Caractéristiques

  • Slider automatique 3D
  • CSS, Javascript, pas d'autre dépendance
  • Une image peut être agrandie dans un autre onglet, une autre dans le carrousel lui-même
  • Vous pouvez attraper une image et manipuler le carrousel
  • Magistral !

Image cliquable pour voir le slider

Carrousel 3D

Références

Site web

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

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]