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.

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.