8 CSS HTML5 JS carousels for modern website

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

CSS/HTML and JS carousels are often used as quality elements for the user experience (UX) in modern web design.

They allow a qualitative enhancement of content, such as photos, videos or other (menu, links, etc.). If you're looking for a quality carousel to impress your visitors, this easy-to-set carousel list will help. Thanks to CodePen, you will find the HTML5/CSS3 or SCSS-JS code to be modified to your liking for your site in order to customize your site to the best of your ability.

3D Carousel

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

This carousel allows 3-dimensional navigation of each of the elements, it is possible to add or remove it at your convenience. Navigation buttons are built in to make it easier and don't have to pass on the visuals. This 3D carousel module can be perfectly suited to the design of your website or application.

Infinite Automatic Carousel

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

An automatic carousel rather oriented "Slider" in the end, contains a linear fading horizontal and a timer, it can fit very well in your pages, your website or your application.

The Hover Carousel

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

A musical ride that has the peculiarity of slide at the same time as you pass on it. Very aesthetic and practical for a worked UX.

CSS Carousel

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

A carousel that gives a Mac OS finder effect in image mode. Adaptable in HTML / CSS3 and JS . Pretty easy to integrate and edit.

Instagram API /CSS Carousel

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

Connect your Instagram bookstore directly to this Carousel, the change is quite simple in the JS. You can adapt it and integrate it on your site easily.

 Team Carousel HTML5 / CSS

See the Pen Carousel team by Marco Barraa(@fixcl) on CodePen.dark

A light carousel, with the ability to change the number of slides to be displayed (nView-3) as well as automation to 2.5 seconds.

WaterWheel Carousel JS / CSS / HTML5

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

A waterwheel format that will indefinitely put the slides back in the presentation chain. Fluid and integrable carousel on your site in a clear and simple way.

Keyboard Control Carousel HTML5 and CSS without JS

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

An amazing carousel/slider that can be driven by arrows or very simply on the keyboard, it incorporates a background in cover mode and the ability to add all the content you want.

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