8 CSS HTML5 JS carousels for modern website

Ecrit le 26/11/2019
Temps de lecture : 4 minutes
Table des matières

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.

Une question ? Un besoin ? Un projet ?
Notre sélection d'informations 
web chaque vendredi
Pour une consultation gratuite ou un devis
cliquez ici

Nos services indispensables

Création de vidéos
Shooting Photo
Création de contenus
Création de pub
Création de Flyers
Design de brochure
Organisation events
Référencement SEO
Création de site internet
et bien plus encore...

Nous avons des centaines de clients satisfaits
qui sont la preuve de nos efforts.


Une équipe à l'écoute et professionnelle ! Je recommande vivement ! (Translated by Google) An attentive and professional team! I highly recommend !

Pierre-Olivier ROBILLARD

Entreprise très sérieuse et réactive. Le résultat est clairement au rdv. Merci. (Translated by Google) Very serious and responsive company. The result is clearly at the appointment. Thanks.

Nicolas Panizza

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 was able to listen and create a site in our image. Thank you Julien for the constructive exchanges, the reactivity and.... the optimizations to come;)

Dream Exploreur

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

Amaury Tardier

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 !

Patrick Body

JAG nous a très bien conseillé pour le référencement de nos sites internet! (Translated by Google) JAG gave us very good advice for the referencing of our websites!

Gilles Guirao

L'expérience de JAG au service de ses clients, la rapidité d'exécution en plus ! (Translated by Google) The experience of JAG at the service of its customers, the speed of execution in addition!

Christian Fleurs

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

Cathel Lemoigne

Bonjour, Une entreprise sérieuse, disponible et à l'écoute de son client. (Translated by Google) Hello, A serious company, available and attentive to its customers.

Nico Goustiaux

Je ne peux que conseiller Julien tant pour son investissement que ses compétences.Fort de son expérience il a répondu pleinement à mes attentes. N'hésitez plus (Translated by Google) I can only advise Julien both for his investment and his skills. With his experience, he fully met my expectations. do not hesitate

Discutez avec nous de vos besoins. 
Nous vous offrirons le meilleur !

Formulaire de bas de page