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

 

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

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

 

Carrousel

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

Carrousel des jours du mois

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

Carrousel d'images en rotation permanente

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

Carrousel d'images en rotation permanente

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

Carrousel a defilement manuel

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

Carrousel a defilement manuel avec ajout de slide

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

Diaporama qui defile a l'infini avec effet de parallaxe

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

Magnifique 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

Carrousel pour 3 images

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

Carrousel automatique

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

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 Carrousel

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

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

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

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

Carrousel d'images automatique simple

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

galerie d'images systeme de tri par categorie

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

galerie d'images avec bootstrap

Références

Site web

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

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

galerie d'images avec belles transitions

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

galerie simple mais parfaitement responsive

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

galerie d'images avec bootstrap

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

images slider vertical

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

diaporama avec light box

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

galerie d'images

Références

Site web

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

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

galerie d'images avec agrandissement

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

galerie d'images avec Normalize.css

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

galerie d'images avec jQuery

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

galerie de 4 icones dans laquelle chaque timbre s'ouvre en pleine page

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

disporama d'images avec transitions et texte en surimpression

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

galerie d'images avec transition et texte en surimpression

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

Galerie d'images avec glissement sur la gauche

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

Galerie d'images responsive

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

Galerie d'images responsive avec une consultation en mode slider

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

Galerie d'images responsive avec une consultation en mode slider

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

galerie d'images avec affichage en grand

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

plugin javascript pour creer un diaporama d'images gratuit

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

Carrousel automatique

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

Carrousel automatique

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

diaporama

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

Carrousel avec timbres en transparence

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

Diaporama responsive avec timbres en incrustation

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

image slider en css pur avec paramétrage

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

slider responsive automatique avec tweenmax

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

Circular 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

Slider responsive et mobile friendly

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

card sider responsive

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

slider automatique sans arret sur l'image

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

Slider a defilement automatique totalement responsive et mobile friendly

Références

Site web

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

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

Diaporama qui defile a l'infini avec effet d'ondulation

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

Diaporama responsive

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

Diaporama responsive et elegant

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

Diaporama responsive avec effet de 'Glassmorphisme'

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

Diaporama ou slideshow pour videos

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

Magnifique Carrousel

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

carousel responsive

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

diaporama d'images avec transitions et texte en surimpression

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

disporama d'images avec transitions et texte en surimpression

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

sideshow avec jolies transitions des textes

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

sideshow avec jolies transitions des textes

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

Slider a defilement vertical multiple

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

image slider scrollable

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

slider responsive manuel avec swiper

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

slider responsive automatique avec CSS et jQuery

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

defilement vertical

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

slideshow automatic

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

Diaporama avec double glissement pour les images

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

slider responsive avec Slick

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

Galerie d'images responsive

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

slider responsive avec texte en surimpression

Références

Site web

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