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

 

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

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

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

- 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

diaporama reponsive plugin

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

galerie d'images mobile friendly

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

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

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

bibliotheque JS pour slideshow

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

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

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

image slider avec template sur base bootstrap

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

slider images, videos avec Bootstrap 4

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

image slider en css pur avec paramétrage

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

slider show pour texte avec transitions

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

Carrousel d'images en rotation permanente

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

slideshow automatic

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

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

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

slideshow automatic

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

images slider vertical

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

Diaporama ou slideshow tres complet

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

Carrousel automatique avec arret sur image et transitions



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

Carrousel automatique avec Bootstrap3.3

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

slider doux en 3D avec perspective

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

Carrousel d'images avec Flickity

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

Galerie d'images responsive

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

le meilleur image slider en CSS

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

Galerie d'images responsive

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

disporama d'images avec transitions et texte en surimpression

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

disporama d'images avec transitions et texte en surimpression

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

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

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

Carrousel simple en pure CSS mais non responsive

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

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 / 01-11-2020]

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 / 11-02-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 / 11-02-2021]