8 CSS HTML5 JS carousels for modern website

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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


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.


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


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!


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 👍


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