Menu
26/11/2019

8 carrousels en CSS HTML5 JS pour site web moderne

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.

attirez plus de visiteurs
sur votre site Web
Chaque mois, 1 email, 3 articles. Gratuit pour toujours.

 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.

 

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.

 

Envie de diagnostiquer votre site internet ?
Passez votre site en revue
Cliquez-ici pour découvrir les diagnostics
par Julien Gauthier
La newsletters
Une sélection d'articles rien que pour vous

Articles qui pourraient vous plaire

La newsletters
Une sélection d'articles rien que pour vous
5.0

Merci à léquipe (Translated by Google) Thanks to the team

5.0

Merci Julien pour ton écoute. Tu as directement identifiés mes attentes et à su mettre en place la stratégie qui me convenait le mieux. Heureux du résultat et de toute l'aide que tu m'as apporté. Je te recommande sans aucunes hésitation!! A très vite. (Translated by Google) Thank you Julien for your listening. You have directly identified my expectations and put in place the strategy that suited me best. Happy with the result and all the help you have given me. I recommend you without any hesitation !! See you soon.

5.0

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 :-)

5.0

J’ai fait appel aux compétences de Julien dans une expérience passée et je ne peux que recommander ses services. Écoute, professionnalisme, disponibilité et bonne humeur... what else ? Merci Julien ! (Translated by Google) I used Julien's skills in a past experience and can only recommend his services. Listening, professionalism, availability and good mood ... what else? Thank you Julien!

5.0

Très bonne agence, très bon travail, allez-y en toute confiance !! Je recommande 👍 (Translated by Google) Very good tour, very good job, go there with confidence !! I recommend 👍

5.0

Service de grande qualité! Pour la refonte de notre site internet, JAG conseil a su être à l'écoute et créer un site à notre image. Merci Julien pour les échanges constructifs, la réactivité et....les optimisations à venir ;) (Translated by Google) High quality service! For the redesign of our website, JAG Conseil has been able to listen and create a site to our image. Thank you Julien for the constructive exchanges, the reactivity and .... the optimizations to come;)