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 77 solutions au 27 03 2024

Bibliothèque, plugin, logiciel à télécharger
1. Blue Imp GallerySlider auto avec timbre (JS)
2. Blue Imp GallerySlider vidéo (JS)
3. Light Gallery par SachinchoolurSlider (jQuery)
4. Photo Swipe MasterSlider avec timbre (JS)
5. Sequence.jsSlider (JS)
6. Woo ThemesSlider (JS)
7. Wow SliderLogiciel

Carrousel
1. Blazek JohnCSS, JS, TweenMax.js, jQuery
2. Boots MarkCSS, JS
3. Ceylan AybukeCSS pur
4. Chhokar JaskiranCSS pur - auto
5. Miller TomJS, Gsap.js, Zepto.js
6. Feret QuentinJS, Swiper (CSS+JS)
7. GillAlexJS, jQuery, Slick
8. Odyntsov IvanSCSS, JS, React.js
9. Sulpis JulienCSS, JS
10. SyahrizalJS, Swiper (CSS+JS)
11. Tran HoangJS - 3D
12. Valladares DobladoCSS, JS, jQuery
13. Wiky Ware NetJS, jQuery
14. Wiky Ware Net 2JS, jQuery

Galerie
1. Abreu MarioCSS pur
2. Ali SaifCSS pur
3. Darji MaulikCSS, JS, Bootstrap
4. EttricsJS, jQuery
5. Eyre TrevorCSS pur
6. Fullyworld Web TutorialsBootstrap.css
7. Jing Chen HuiCSS pur
8. Liang-Shih LinCSS pur
9. Md MuajCSS pur
10. Menezes TaluskaCSS pur
11. Molnar NikolettCSS, JS
12. Moshfequr RahmanCSS pur
13. Pivovarov RuslanJS, jQuery
14. Pivovarov Ruslan (2)CSS, JS
15. Talanov Nikolay (2)JS, jQuery, TweenLite.js, etc...
16. Talanov Nikolay (4)CSS, JS
17. Watkins JoeJS, jQuery, etc...
18. Williams StephanieCSS pur

Galerie devenant slider
1. Roberts CalvinLightBox (CSS+JS)
2. Samal SachinJS, BaguetteBox
3. Schiff BradjQuery, LightBox (CSS+JS)
4. SpotLight par Wilkerling T.JS
5. Syahrizal (2)JS, jQuery, FancyBox (CSS+JS)
6. Tuts+UiKit (CSS+JS)

Slider avec timbres
1. Cohle JackJS, jQuery, Swiper-bundle
2. Faria RafaelJS, jQuery
3. Malicevic MilanjQuery, Lightslider

Slider horizontal
1. Buljan Roko C.CSS pur
2. Carvalho BrunoJS, jQuery, TweenMax
3. Circular Slider par KeyFramersJS
4. De Bruyne KasperJS, GSAP - Slider+
5. Erdem MuhammedJS, jQuery, Swiper
6. Fuzinato DarioJS, TweenMax.js
7. HakeemJS, GSAP
8. HyperplexedJS, React.js, Gsap.js, etc...
9. Landberg Jesper (2)JS, Gsap.js
10. Max-PJS, jQuery)
11. Mc Guire AaronJS, jQuery, Slick
12. Minz CodeJS, Swiper-bundle
13. Mulligan RyanJS, GSAP
14. Ottaviani FabioJS, jQuery, Slick
15. Rak BrianJS, GSAP
16. Smith JohnJS
17. Talanov NikolayJS
18. Talanov Nikolay (3)JS, React.js
19. Talanov Nikolay (5)JS, jQuery

Slider vertical
1. Arseny M.JS
2. Bali BaloJS, jQuery
3. Carvalho Bruno 2JS, Swiper
4. Carvalho Bruno 3JS, jQuery
5. Coyle LouisCSS pur
6. CssSlider.comCSS, jQuery - Auto
7. Landberg JesperJS, Gsap.js, etc...
8. Ottaviani Fabio (2)JS, jQuery, Slick
9. Sampaio GlauberCSS - Auto
10. Serrano SimonJS, jQuery

Supprimé ou non Pris en Compte (PeC)
1. Adaptor de Parsons Phil (supprimé le 30-10-2021, pas mobile friendly)
2. Ainalem Mikael (supprimé le 30-10-2021, pas mobile friendly)
3. Azmind (supprimé le 15-06-2022, pas responsive)
4. Bué Matthieu (supprimé le 30-10-2021, pas mobile friendly)
5. Crofte Geoffrey (supprimé le 22-10-2021, pas responsive)
6. Css Script (supprimé le 30-10-2021, pas mobile friendly)
7. Developpez.com (supprimé le 22-10-2021, pas responsive)
8. Dhakar Lokesh (non PeC le 22-03-2021, pas responsive)
9. Dynamic Drive (supprimé le 22-10-2021, ne marche pas sur mobile)
10. Gonzalves Lm (supprimé le 15-06-2022, pas responsive)
11. Khan Shamim (supprimé le 15-06-2022, pas responsive)
12. Khan Shamim 2 (supprimé le 22-10-2021, pas responsive)
13. Khan Shamim 3 (supprimé le 22-10-2021, pas responsive)
14. Light Box par Dhakar Lokesh (supprimé le 30-10-2021, pas mobile friendly)
15. M Konstantin (supprimé le 15-06-2022, pas responsive)
16. Moreira Moreno Abel Daniel (supprimé le 30-10-2021, pas mobile friendly)
17. Moyal Eli (supprimé le 15-06-2022, pas responsive)
18. Nozdriukhin Alex (supprimé le 30-10-2021, pas mobile friendly)
19. Odunsi Joseph (supprimé le 30-10-2021, pas mobile friendly)
20. Radu Bratan (supprimé le 30-10-2021, pas mobile friendly)
21. Saran Vikram (supprimé le 30-10-2021, pas mobile friendly)
22. Shackleton Zoe (supprimé le 15-06-2022, pas responsive)
23. Tympanus (supprimé le 22-10-2021, ne marche pas sur mobile)
24. Vo Trung (supprimé le 30-10-2021, pas mobile friendly)

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

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

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

Références

Site web

[Créé / modifié] [17-12-2020 / 17-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

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

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

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

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

Références

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

Carrousel

Blazek John - Carrousel

Caractéristiques

CSS, JS, TweenMax.js, jQuery
Plus le curseur est éloigné du centre, vers la droite ou la gauche, plus le carrousel tourne vite
Plus le curseur est éloigné du centre, vers le haut ou le bas, moindre est la taille du carrousel
Pas de visionnage d'image 'en grand'
Philadelphie, Pennsylvanie, USA

Image cliquable pour voir le Carrousel

Références

Site web

[Créé / modifié] [17-08-2022 / 17-08-2022]

Boots Mark - Carrousel

Caractéristiques

CSS, JS
Jours fériés aux États-Unis pour le mois de février
Très très original
Canada

Image cliquable pour voir le Carrousel

Références

Site web

[Créé / modifié] [18-03-2022 / 18-02-2022]

Ceylan Aybuke - Carrousel

Caractéristiques

CSS pur
Pour avancer il faut cliquer sur l'image suivante
Pas d'affichage de l'image 'en grand'
Izmir, Turquie

Image cliquable pour voir le Carrousel

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

Chhokar Jaskiran - Carrousel

- 3D
- 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 Carrousel

Références

Site web

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

Feret Quentin - Carrousel

Caractéristiques

CSS, JS, Swiper (CSS+JS)
Défilement manuel [Desktop: Ascenseur, souris; Mobile: Doigt]
Texte en surimpresiion au moment du rollover ou du toucher
Pas d'affichage de l'image 'en grand'
France

Image cliquable pour voir le Carrousel

Références

Site web

[Créé / modifié] [23-02-2022 / 23-02-2022]

Gill Alex - Carrousel

Caractéristiques

CSS, JS, jQuery, Slick (CSS+JS)
Défilement manuel [Desktop: Souris, flèches; Mobile: Doigt, flèches]
Possibilité d'ajouter, en ligne, un 'slide' ou de le retirer
Pas d'affichage de l'image 'en grand'
Portsmouth, Angleterre

Image cliquable pour voir le Carrousel

Références

Site web

[Créé / modifié] [23-02-2022 / 23-02-2022]

Miller Tom - Carrousel

- Ce slider défile à l'infini et offre un effet de parallaxe

Caractéristiques

Il faut attraper une image avec la souris ou la toucher avec le doigt pour faire défiler
Rollover
CSS, JS, Gsap.js, Zepto.js
Pas d'image en grand
Mount Pleasant, Caroline du sud, USA

Image cliquable pour voir le Carrousel

Références

Site web

Site de l'auteur

[Créé / modifié] [17-11-2021 / 17-11-2021]

Odyntsov Ivan - Carrousel

- 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 Carrousel

Références

Site web

Site de l'auteur

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

Sulpis Julien - Carrousel

Caractéristiques

CSS, Javascript, rien d'autre
Rollover sur les images qui s'agrandissent
Quand on clique sur l'image du milieu, on zoome
Quand on clique sur celle d'un côté on l'amène au milieu, si on reclique dessus on revient à la position d'origine
C'est bien fait et assez curieux comme comportement. J'aimerais voir ce que cela donne avec plus d'images
Lyon, France

Image cliquable pour voir le Carrousel

Références

Site web

[Créé / modifié] [28-04-2022 / 28-04-2022]

Syahrizal - Carrousel

Caractéristiques

Carrousel automatique
CSS, JS, Swiper (CSS+JS)
Pas de rollover
Défilement [Desktop: Souris; Mobile: Doigts]
Indonésie

Image cliquable pour voir le Carrousel

Références

Site web

[Créé / modifié] [03-03-2022 / 03-03-2022]

Tran Hoang - Carrousel

- 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 Carrousel

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 Carrousel

Références

Site web

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

Wiky Ware Net - Carrousel

Carrousel avec effet de parallaxe, impressionnant !
- Sauf que l'on ne peut pas intervenir pour passer les images ni les agrandir

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 Carrousel

Références

Site web

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

Wiky Ware Net 2 - Carrousel

On ne peut pas intervenir pour agrandir les images (trop petites sur mobile)

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 Carrousel

Références

Site web

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

Galerie

Abreu Mario - Galerie

Caractéristiques

CSS pur, aucune dépendance
Avec des images qui doivent avoir une largeur identique
Un rollover d'ombre
Pas d'affichage de l'image 'en grand'
Un système de restriction par catégorie
Mexico, Mexique

Image cliquable pour voir la Galerie

Références

Site web

Site de l'auteur

[Créé / modifié] [08-04-2022 / 08-01-2022]

Ali Saif - Galerie

Caractéristiques

CSS pur, aucune dépendance
Avec des images qui doivent avoir une largeur identique
Pas de rollover
Pas d'affichage de l'image 'en grand'
Kolkata, West Bengal, Inde

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

Darji Maulik - Galerie

Caractéristiques

CSS, animate.css, JS, jQuery, Bootstrap
Pas de rollover mais l'image s'affiche en grand au clic
Faire "F5" pour voir les images changer
Parfaitement responsive

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [27-03-2024/ 27-03-2024]

Ettrics - Galerie

Caractéristiques

CSS, JS, jQuery
Pas de rollover
Très joli va et vient de remplacement des icônes de gauche et de l'image agrandie
Belle transition du texte qui glisse pour arriver et pour partir
Parfaitement responsive
Ottawa, Canada

Image cliquable pour voir la Galerie

Références

Site web

Site de l'auteur

[Créé / modifié] [28-04-2022 / 28-04-2022]

Eyre Trevor - Galerie

Caractéristiques

CSS pur
Présentation à la Pinterest
Pas de rollover
Pas d'affichage de l'image 'en grand'
Parfaitement responsive
Boise, Idaho, USA

Image cliquable pour voir la Galerie

Références

Site web

Site de l'auteur

[Créé / modifié] [16-05-2022 / 16-05-2022]

Fullyworld Web Tutorials - Galerie

Caractéristiques

CSS, Bootstrap.css (V 4.4)
Avec des images qui doivent avoir une largeur identique
Le rollover amène la couleur
Pas d'affichage de l'image 'en grand'
Inde

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

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 vertical

Image cliquable pour voir la Galerie

Références

Site web

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

Liang-Shih Lin - Galerie

Caractéristiques

CSS, Normalize.css, rien d'autre
Joli rollover avec ombre et gonflement de l'image
Pas d'affichage de l'image 'en grand'
Un texte est ajouté juste au milieu de l'image
Les images ont soit un côté egal soit double
Taipei City, Taiwan

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [08-04-2022 / 08-04-2022]

Md Muaj - Galerie

- Travail propre

Caractéristiques

CSS pur
Rollover sur l'image
Pas d'affichage de l'image 'en grand'
Bangladesh

Image cliquable pour voir la Galerie

Références

Site web

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

Menezes Taluska - Galerie

- Très propre

Caractéristiques

CSS pur
Le rollover agrandit l'image, les autres diminuent en intensité lumineuse
Finlande

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [27-03-2024 / 27-03-2024]

Molnar Nikolett - Galerie

- Nécessite absolument : stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57c1 abc0e64599724ae30d7 ea4c6877 eb615f89387.js
- Pas responsive

Caractéristiques

CSS, JS
Quand on clique sur l'image elle s'agrandit, normalement elle recouvre toutes les autres
L'idée est bonne sauf que même avec un 'overflow: hidden;' ça dépend, ça dépasse
Le rollover colore l'image
Hongrie

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [18-03-2022 / 18-03-2022]

Moshfequr Rahman - Galerie

Caractéristiques

CSS, Normalize.css
Avec des images qui doivent avoir une largeur identique
Pas de rollover
Pas d'affichage de l'image 'en grand'
Dhaka, Bangladesh

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

Pivovarov Ruslan - Galerie

Caractéristiques

CSS, JS, jQuery
Très joli rollover qui écarte les images autour de celle choisie et qui affiche un titre
Le clic sur une image l'affiche en pleine page avec une croix, en haut à gauche, pour revenir à la galerie

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

Pivovarov Ruslan - Galerie

Caractéristiques

CSS, JS, jQuery
Galerie d'exposition. Chaque timbre s'ouvre dans un mouvement (X transitions) magnifique
idem pour le retour
Éventuellement un lien 'épisodes' qui pourrait mener sur une autre page construite de la même façon

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [18-03-2022 / 18-03-2022]

Talanov Nikolay (2) - Galerie

Caractéristiques

Fonctionnement manuel
CSS, JS, jQuery, TweenLite.js, CSSPlugin.js, EasePack.js
Beaucoup de dépendances
On accroche l'image avec le doigt ou la souris et on la fait glisser. Cela crée une vague crénelée. Reste à aimer l'effet proposé
Singapour

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [18-01-2022 / 18-03-2022]

Talanov Nikolay (4) - Galerie

Caractéristiques

Fonctionnement manuel
CSS, JS, rien d'autre
Défilement : [ Sans ]
Rollover sur l'image avec appartion du numéro (ou autre)
Si l'on clique sur une image elle s'affiche 'en grand' avec une superbe transition
Singapour

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [23-02-2022 / 23-02-2022]

WatkinsJoe - Galerie

Caractéristiques

CSS, Normalize.css, JS, jQuery, ToggleAria.js
Pas de rollover
Au clic tout le panel d'image s'efface sur la gauche pour laisser apparaître l'imag en plus grand avec un texte associé
On retourne à la galerie en cliquant sur la croix
Portland,Orégon, USA

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

Williams Stephanie - Galerie

Caractéristiques

CSS absolument pur
L'image prend du volume au survol
Le nombre d'images dépend de la largeur de l'écran
Pas d'affichage de l'image 'en grand'
Les images font toutes quasiment la même largeur
Proposition agréable
Lincolnton, Caroline du Nord, USA

Image cliquable pour voir la Galerie

Références

Site web

Site de l'auteur

[Créé / modifié] [03-02-2022 / 03-02-2022]

Galerie devenant slider

Roberts Calvin - Galerie / Slider

Caractéristiques

CSS, LightBox(CSS+JS)
Lorsque l'on clique sur une image elle s'affiche en grand et l'on rentre dans le système 'slider'
Si l'on sort de ce mode on revient à la galerie
Pas de rollover sur les images mais un affichage en fondu
Un petit texte en bas à gauche avec le numéro d'image
Jolie proposition idéalement responsive
Londres, Angleterre

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [16-06-2022 / 16-06-2022]

Samal Sachin - Galerie / Slider

- Galerie devenant slider
- Nécessite absolument pour la recherche: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877eb615f89387.js

Caractéristiques

Galerie d'images
CSS, BaguetteBox(CSS+JS), JS
Lorsque l'on clique sur une image elle s'affiche en grand et l'on rentre dans le système 'slider'
Si l'on sort de ce mode on revient à la galerie
A celà s'ajoute un tri par restriction sous forme de zone de recherche
Irving, Texas, USA

Image cliquable pour voir la Galerie

Références

Site web

Site de l'auteur

[Créé / modifié] [08-04-2022 / 08-04-2022]

Schiff Brad - Galerie / Slider

Caractéristiques

Fonctionnement manuel
CSS, jQuery, LigtBox (CSS+JS)
Rollover au survol du timbre
Le clic sur un timbre ouvre l'image 'en grand' dans une fenêtre modale. Ensuite on peut passer d'image en image avec les flèhe en mode slider
Défilement: Uniquement avec les flèches

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [16-05-2022 / 16-05-2022]

SpotLight par Wilkerling Thomas - Galerie / Slider

- 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

Références

Site web

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

Syahrizal (2) - Galerie / Slider

- Nécessite absolument :
'stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57c1 abc0e64599724 ae30d7ea4c6877 eb615f89387.js'

Caractéristiques

Mode galerie par défaut
Slider avec tableau de commande : Mode automatique; Zoom; Timbres; Plein écran; Partager
CSS, JS, Swiper (CSS+JS)
Rollover d'intensité lumineuse très très léger
Défilement [Desktop: Souris, flèches; Mobile: Doigts]
Indonésie

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [03-03-2022 / 03-03-2022]

Tuts+ - Galerie / Slider

Caractéristiques

CSS, UiKit (CSS+JS)
Lorsque l'on clique sur une image elle s'affiche en grand et l'on rentre dans le système 'slider'
Si l'on sort de ce mode on revient à la galerie
Pas de rollover sur les images mais un affichage en fondu
Un petit texte en bas à l'intérieur d'un bandeau plus contrasté

Image cliquable pour voir la Galerie

Références

Site web

[Créé / modifié] [16-06-2022 / 16-06-2022]

Slider avec timbres

Cohle Jack - Slider avec timbres

Caractéristiques

CSS, JS, jQuery, Swiper-bundle
Défilement automatique
Texte en incrustation
Belle arrivée de l'image avec une fin de course glissante
Slider parfait

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [07-01-2022 / 07-01-2022]

Faria Rafael - Slider avec timbres

Caractéristiques

CSS, JS, jQuery, Carousel.js
Progression par clic sur le timbre
Les timbres apparaissent en transparence sur l'image
Mobile firendly
Sao Paulo, Brésil

Image cliquable pour voir le slider

Références

Site web

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

Malicevic Milan - Slider

Caractéristiques

CSS, JS, jQuery, Lightslider (CSS+JS)
Défilement manuel : Souris sur desktop, doigt sur mobile
Incrustation des timbres qui évoluent en même temps que les images et sur lesquels on peut cliquer
Le texte apparaît par glissement doux et avec un léger décalage pour le sous texte
Pays-Bas

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [03-02-2022 / 03-02-2022]

Slider horizontal

Buljan Roko C. - Slider horizontal

Caractéristiques

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

Image cliquable pour voir le slider

Références

Site web

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

Carvalho Bruno - Slider horizontal

- Ce slider est beau mais ça fait lourd de code
- Ne fonctionne pas avec le doigt sur mobile, il faut utiliser les flèches

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

Références

Site web

Site de l'auteur

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

Circular Slider par KeyFramers - Slider horizontal

- Ne fonctionne pas avec le doigt sur mobile, il faut utiliser les flèches
- 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

Références

Site web

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

De Bruyne Kasper - Slider horizontal

- Service très très complet
- Responsive et mobile friendly

Caractéristiques

CSS, Normalize.css, JS, Gsap.js, React.js, Draggable.js, InertiaPlugin.js
Il faut être inscrit pour utiliser : InertiaPlugin.js'
Deux modes de progression
Un mode jour/nuit
Bluffantissime !
Eeklo, Belgique

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [12-11-2021 / 12-11-2021]

Erdem Muhammed - Card Slider horizontal

- Très apprécié sur CodePen

Caractéristiques

CSS, Normalize.css, JS, jQuery, Swiper
Le défilement peut s'opèrer avec la roulette de la souris à condition d'être sur l'image ou avec la souris en "attrapant" l'image
Parfaitement responsive
Istanbul, Turquie

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [12-11-2021 / 12-11-2021]

FuzinatoDario - Slider horizontal

Caractéristiques

CSS, JS, TweenMax.js
Slider automatique sans arrêt sur image
Progression par clic sur les boutons de navigation
Animation sur ces boutons
Sao Paulo - Brésil

Image cliquable pour voir le slider

Références

Site web

Site de l'auteur

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

Hakeem - Slider horizontal

- Présentation agréable et très complète !

Caractéristiques

CSS, JS, GSAP.js
Défilement automatique
Transitions agréables au niveau du texte
Pas d'affichage de l'image 'en grand'
Parfaitement adapté au mobile
Lagos, Nigéria

Image cliquable pour voir le slider

Références

Site web

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

Hyperplexed - Slider horizontal

- Slider automatique

Caractéristiques

CSS, JS, React.js, GSAP.js, Classnames.js
Défilement automatique uniquement
Transitions aussi agréables que douces
Pas d'affichage de l'image 'en grand'
Londres

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [17-08-2022 / 17-08-2022]

Landberg Jesper (2) - Slider horizontal

- Ce slider défile à l'infini

Caractéristiques

Il faut cliquer sur l'image avec la souris ou la pointer avec le doigt
À la sélection s'ensuit un phénomène d'ondulation et on passe à l'image suivante
CSS, JS, Twgl-full.js, TweenMax.js

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [17-11-2021 / 17-11-2021]

Max-P - Slider horizontal

Caractéristiques

Il faut attraper une image avec la souris ou la toucher avec le doigt pour faire défiler
CSS, JS, jQuery
La présentation diffère légèrement quand on réduit la fenêtre

Image cliquable pour voir le slider

Références

Site web

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

Mc Guire Aaron - Slider horizontal

Caractéristiques

Défilement automatique
Pas d'arrêt sur image
CSS, JS, jQuery, Slick
Cette présentation élégante se manipule mieux sur mobile
Manchester, Angleterre

Image cliquable pour voir le slider

Références

Site web

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

Minz Code - Slider horizontal

Caractéristiques

CSS, Normalize.css, JS, Swiper-bundle (CSS+JS)
Défilement manuel : Souris sur desktop, doigt sur mobile
Effet de 'Glassmorphisme'
Le texte apparaît au passage de la souris sur desktop, par contact avec le doigt sur mobile
Séoul, Corée du Sud

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [03-02-2022 / 03-02-2022]

Mulligan Ryan - Slider horizontal

- Slider vidéo absolument magnifique !

Caractéristiques

Slider manuel avec timbre en rollover
CSS, Normalize.css, Slider-pro.css, Javascript, jQuery, Slider-Pro.js
Les vidéos sont visibles en fenêtre modale
Texte en surimpression avec effet

Image cliquable pour voir le slider

Références

Site web

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

Ottaviani Fabio - Slider horizontal

- Très original

Caractéristiques

SCSS, JS, jQuery, SLick
Slider manuel, l'image est à attraper avec la souris ou avec le doigt
Pesaro / Perugia, Italie

Image cliquable pour voir le slider

Références

Site web

Site de l'auteur

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

Rak Brian - Slider horizontal

Caractéristiques

CSS, JS, Slick, jQuery
Défilement manuel
On peut déplacer les images soit avec la souris sur desktop soit avec le doigt sur mobile

Image cliquable pour voir le slider

Références

Site web

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

Smith John - Slider horizontal

- 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

Références

Site web

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

Talanov Nikolay - Slider horizontal

- On ne peut pas intervenir pour passer les images

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

Références

Site web

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

Talanov Nikolay (3) - Slider horizontal

Caractéristiques

Fonctionnement automatique
CSS, JS, React.js
Affichage de l'image, par bandes, de manière progressive
Jolies animations des textes
Singapour

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [18-01-2022 / 18-03-2022]

Talanov Nikolay (5) - Slider horizontal

- Nécessite absolument :
'stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57c1 abc0e64599724 ae30d7ea4c6877 eb615f89387.js'

Caractéristiques

Fonctionnement automatique
CSS, JS, jQuery
Affichage d'un texte en surimpression avec un effet de parralaxe
Cet homme là est LE spécialiste, quel talent !
Singapour

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [18-01-2022 / 18-03-2022]

Slider vertical

Arseny M. - Slider vertical

- 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

Références

Site web

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

Bali Balo - Slider vertical

Caractéristiques

CSS, Normalize.css, JS, jQuery
Fonctionnement manuel
Les images se superposent en glissant
Le scroll est réalisé avec la souris sur desktop et avec le doigt sur mobile
Service simple mais efficace
France

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [18-01-2022 / 18-01-2022]

Carvalho Bruno 2 - Slider vertical

- 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

Références

Site web

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

Carvalho Bruno 3 - Slider vertical

- Ne fonctionne pas avec le doigt sur mobile, il faut utiliser les flèches

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

Références

Site web

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

Coyle Louis - Slider vertical

Caractéristiques

CSS pur
Simple défilement vers le bas plutôt qu'un slideshow
Hawke's Bay, New Zealand

Image cliquable pour voir le slider

Références

Site web

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

CssSlider.com - Slider vertical

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

Références

Site web

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

Landberg Jesper - Slider vertical

- Ce slider défile à l'infini

Caractéristiques

CSS, Normalize.css, JS, TweenMax.js, Three.js
Modèle 'Fashion concept'
Défilement par molette sur desktop et doigt sur mobile
Double transitions : Double glissement pour les images et aspect "surface de l'eau" pour le fond d'écran
Linkoping, Suède

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

Ottaviani Fabio (2) - Slider vertical

- Nécessite absolument: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877 eb615f89387.js
- Superbe !

Caractéristiques

CSS, Normalize.css, JS, jQuery, SLick
Slider manuel qui répond au scroll. Alors deux demi-images s'assemblent par glissement opposé
Superbes icônes de côté pour le positionnement direct
Pesaro / Perugia, Italie

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [07-05-2022 / 07-05-2022]

Sampaio Glauber - Slider vertical

- 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

Références

Site web

Concept original

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

Serrano Simon - Slider vertical

- Superbe !

Caractéristiques

Slider manuel
CSS, Animate.css, JS, jQuery, jQuery UI, Scrolloverflow.js
Option 'plus' qui affiche une image complémentaire à la première
Défilement: Icône ou scroll
En haut à gauche de chaque image, texte en surimpression avec deux jolies transitions
Paris, France

Image cliquable pour voir le slider

Références

Site web

[Créé / modifié] [07-05-2022 / 07-05-2022]