8 carrousels en CSS HTML5 JS pour site web moderne

Ecrit le 26/11/2019
Temps de lecture : 4 minutes
Sommaire

Les carrousels en CSS / HTML et JS sont souvent utilisés comme des éléments de qualité pour l'expérience utilisateur (UX) dans la conception Web moderne.

Ils permettent une mise en valeur qualitative des contenus, tels que des photos, des vidéos ou autres (menu, liens, etc...). Si vous recherchez un carrousel qualitatif pour épater vos visiteurs, cette liste de carrousel facile à mettre en place vous aideront.Vous retrouverez grâce à CodePen directement le code HTML5 / CSS3 ou SCSS + JS à modifier à votre convenance pour votre site afin de personnaliser au mieux votre site.

 

 

Carrousel 3D

See the Pen 3D Carousel: navigation by Giulio Mainardi (@mgiulio) on CodePen.dark

Ce carrousel permet une navigation en 3 dimensions de chacun des éléments, il est possible d'en ajouter ou d'en retirer à votre convenance. Des boutons de navigation sont intégrés pour faciliter celle-ci et ne pas avoir à passer sur les visuels. Ce module carousel en 3D peut être parfaitement adapté à la conception de votre site Web ou Application.

 

Infinite Automatic Carrousel

See the Pen Infinite Automatic Carousel by Julien Lejeune (@jlnljn) on CodePen.dark

Un carrousel automatique plutôt orienté "Slider" au final, contient un fading linéaire à l'horizontal et un timer, il pourra s'adapter très bien dans vos pages, votre site Web ou votre application.

 

Le Hover Carrousel

See the Pen Hover-Carousel by Yair Even Or (@vsync) on CodePen.dark

Un Carrousel qui a pour particularité de slide en même temps que vous passez dessus. Très esthétique et pratique pour une UX travaillée.

 

Carrousel Itune CSS

See the Pen Carousel by DobladoV (@dobladov) on CodePen.dark

Un carrousel qui donne un effet finder de Mac OS en mode image. Adaptable en HTML / CSS3 et JS . Plutôt facile à intégrer et modifier.

 

Carrousel INSTAGRAM API / CSS

See the Pen Looping Instagram Feed Carousel by Ryan Mulligan (@hexagoncircle) on CodePen.dark

Connectez votre librairie Instagram directement sur ce Carrousel, la modification est assez simple dans le JS. Vous pourrez l'adapter et l'intégrer sur votre site facilement.

[oxygen-template id="252569"]

 Team Carrousel HTML5 / CSS

See the Pen Carousel team by Marco Barría (@fixcl) on CodePen.dark

Un carrousel light, avec la possibilité de modifier le nombre de slide à afficher (nView=3) ainsi qu'une automatisation à 2,5secondes.

 

WaterWheel Carrousel JS / CSS / HTML5

See the Pen 3d carousel 3 by Juan C. Irizar (@carliirizar) on CodePen.dark

Un format waterwheel qui replacera indéfiniment les slides en back dans la chaine de présentation. Carrousel fluide et intégrable sur votre site de façon clair et simple.

 

Keyboard Control Carousel HTML5 et CSS sans JS

See the Pen CSS Carousel with keyboard controls by David Lewis (@dp_lewis) on CodePen.dark

Un carrousel / slider étonnant qui peut être piloté par des flèches ou très simplement au clavier, il intègre un background en mode cover et la possibilité d'ajouter tous les contenus que vous souhaitez.

 

Ecrit par Julien GAUTHIER

Geek à plein temps

SITE INTERNET SUR MESURE
Une équipe de développeurs web et d'experts en stratégie digitale dédiée dédiée à la réalisation de votre projet
PREMIÈRE PAGE SUR GOOGLE
Notre agence spécialisée dans la rédaction de contenu SEO vous donne accès aux avantages du référencement local
DE NOUVEAUX CLIENTS
Améliorez la visibilité de votre entreprise grace au marketing digital sur les moteurs de recherche et réseaux sociaux
ON VOUS RAPPELLE GRATUITEMENT

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez faire de la publicité sur Instagram ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat