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

  1. AzmindTemplate (CSS; JS; jQuery; Bootstrap) 
  2. Caqueux NicolasSlider (CSS; jQuery) 
  3. Crofte GeoffreySlider (CSS; jQuery) 
  4. Developpez.comGalerie (CSS pur) 
  5. Gonzalves LmSlider (CSS; jQuery) Nouveauté
  6. Shackleton ZoeGalerie (CSS; Javascript; jQuery) 
  7. Valladares DobladoCarousel (CSS; Javascript; jQuery) 

Azmind

Voir le template

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

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

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

Developpez.com

Voir la galerie

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

Shackleton Zoe

Voir la galerie

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 le Carousel

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