Diaporama (slideshow), carousel, 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).

Je vous propose 18 solutions au

  1. Ainalem MikaelSlider (JS) 
  2. AzmindTemplate (CSS; JS; jQuery; Bootstrap) 
  3. Bué MatthieuSlider (CSS pur) 
  4. Caqueux NicolasSlider (CSS; jQuery) 
  5. Chhokar JaskiranCarousel (CSS pur) 
  6. Crofte GeoffreySlider (CSS; jQuery) 
  7. CssSlider.comSlider (CSS; jQuery) 
  8. Developpez.comGalerie (CSS pur) 
  9. Gonzalves LmSlider (CSS; jQuery) 
  10. Jing Chen HuiSlider (CSS pur) 
  11. Sampaio GlauberSlider (CSS, ) 
  12. Saran VikramSlider (JS) 
  13. Sequence.jsBibliothèque (JS) Nouveauté
  14. Shackleton ZoeGalerie (CSS; Javascript; jQuery) 
  15. Valladares DobladoCarousel (CSS; Javascript; jQuery) 
  16. Van Thanh DangSlider (CSS pur) 
  17. Vo TrungSlider (CSS pur) 
  18. Woo ThemesBibliothèque (JS) Nouveauté

Ainalem Mikael

Voir la démo

Les caractéristiques

  • Javascript et CSS
  • Mode automatique seulement
  • Série de clips
  • Bluffant mais inutilisable pour le commun des mortels
image slider avec template sur base bootstrap
Site de référence

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

positionneen début de page

Azmind

Voir la démo

Les 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 slider avec template sur base bootstrap
Site de référence

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

positionneen début de page

Bué Matthieu alias Twikito - Pure CSS Slider

Voir la démo

Les 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 slider en css pur avec paramétrage
Site de référence

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

positionneen début de page

Caqueux Nicolas

Voir la démo

Les 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
slider show pour texte avec transitions
Site de référence

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

positionneen début de page

Chhokar Jaskiran

Voir la démo

Les caractéristiques

  • CSS pur
  • L'image n'est pas agrandie au passage de la souris
  • On peut modifier la vitesse de rotation
  • Pas responsive
carousel d'images en rotation permanente
Site de référence

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

positionneen début de page

Crofte Geoffrey

Voir la démo

Les 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 responsive
slideshow automatic
Site de référence

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

positionneen début de page

CssSlider.com

Voir la démo

Les 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
slideshow automatic
Site de référence

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

positionneen début de page

Developpez.com

Voir la démo

Les caractéristiques

  • Avec Tuto
  • CSS pur
  • Effet de zoom
  • Bouton de fermeture sur l'image zoomée
  • Pas responsive
tutoriel de slider en css pur
Site de référence

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

positionneen début de page

Gonzalves Lm

Voir la démo

Les 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.
  • Avec le mode automatique ce serait 10/10
slideshow automatic
Site de référence

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

positionneen début de page

Jing Chen Hui

Voir la démo

Les caractéristiques

  • CSS pur
  • Mode manuel
  • Slider vertival
  • Responsive
images slider vertical
Site de référence

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

positionneen début de page

Sampaio Glauber

Voir la démo

Les 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
Galerie d'images responsive
Site de référence

Concept original

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

positionneen début de page

Saran Vikram alias Vikram Codes - Image Slider

Voir la démo

Les 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 !
le meilleur image slider en CSS
Site de référence

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

positionneen début de page

Sequence.js

Voir la démo

Les caractéristiques

  • Bibliothèque
  • CSS, JS
  • Magnifique SlideShow
  • 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.
bibliotheque JS, gratuit, pour installer un diaporama sur son site web
Site de référence

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

positionneen début de page

Shackleton Zoe

Voir la démo

Les 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
Galerie d'images responsive
Site de référence

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

positionneen début de page

Valladares Doblado

Voir la démo

Les caractéristiques

  • Carrousel
  • CSS; Javascript; jQuery
  • Navigation en cliquant sur l'image ou sur les zones de défilement
  • Beau travail
Carousel d'images avec flèches de déplacement
Site de référence

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

positionneen début de page

Van Thanh Dang

Voir la démo

Les 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
  • Pas responsive. Dommage le travail est trè propre !
Carousel simple en pure CSS mais non responsive
Site de référence

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

positionneen début de page

Vo trung

Voir la démo

Les caractéristiques

  • Responsive Slideshow / Carousel 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
Carousel d'images avec flèches de déplacement
Site de référence

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

positionneen début de page

Woo Themes

Voir la démo

Les 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/
bibliotheque JS pour slideshow

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

positionneen début de page