23 CSS Carousels

Collection of free HTML and pure CSS carousel code examples: responsive, horizontal and vertical. Update of January 2018 collection. 2 new items.

Table of Contents

1. Horizontal Carousels
2. Vertical Carousels

Horizontal Carousels

Author

• Gary Wesolowski
• April 13, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Multidirectional Email Carousel

Carousel type build that scrolls over large background image using directional arrows. Unsupported environments will display a fallback static image.

Author

• Md Nahidul Islam
• November 16, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (jQuery.js, bootstrap.js, owl.carousel.js)

About the code

Nice Responsive Testimonial Carousel

It's a nice responsive testimonial owl carousel slider.

Author

• Jack Oliver
• November 3, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Infinite Autoplay Carousel

Useful for startup landing pages where you need to display brand partners and other cool logos or whatever.

Carousel

Carousel with React.js.
Made by Andy Pagès
February 16, 2017

3D Smooth Carousel

3D smooth carousel/slider with HTML, CSS and JavaScript.
Made by Eduardo Allegrini
February 4, 2017

Infinite Automatic Carousel

HTML, CSS and JavaScript infinite automatic carousel.
Made by Julien Lejeune
January 31, 2017

Hover-Carousel

Moves left or right in relation to the mouse position inside it’s area.
Made by Yair Even Or
January 4, 2017

HTML, CSS and JavaScript Carousel

A simple carousel.
Made by DobladoV
November 23, 2016

Mobile Carousel

HTML and CSS material cards carousel.
Made by Kate Hummer
October 21, 2016

Looping Instagram Feed Carousel

Latest posts from Instagram pulled into a slick.js carousel.
Made by Ryan Mulligan
August 8, 2016

Simple Synchronised Carousel

This is the simple synchronised carousel used awesome Slick.js carousel.
Made by Rian Ariona
July 25, 2016

Author

• Jhey
• May 24, 2016

Links

• demo and code

Made with

• HTML (Pug) / CSS (Stylus)

About the code

Pure CSS Carousels

Leveraging use of how elements behave in the DOM in combination with features of CSS makes implementing a pure CSS "carousel" relatively trivial.

Horizontal 3D Carousels

HTML and CSS horizontal carousels. Just hover the boxes.
Made by Daniel Racine
August 10, 2015

CSS Carousel

HTML and CSS 3D transform colorful animated carousel.
Made by Edmundo Santos
August 1, 2015

Ambilight Carousel

Bootstrap carousel with ambilight.
Made by adobewordpress
May 13, 2015

Carousel Team

Concept carousel with some basic functions such as auto play.
Made by Marco Barría
January 27, 2015

3D Carousel

3D Carousel with Waterwheel-carousel.js
Made by Juan C. Irizar
December 3, 2014

3D Cube Carousel

4-sided carousel/slider in 3D.
Made by Derek Wheelden
February 5, 2014

CSS Carousel With Keyboard Controls

Not recommended for production use. But it seemed like a fun idea to see how far I could take a form with radio inputs.
Made by David Lewis
June 29, 2014

Vertical Carousels

Author

• Danil Goncharenko
• August 15, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (jQuery.js, TweenMax.js)

About the code

Vertical Carousel

Vertical carousel with TweenMax.js

Pure CSS Carousel

Basic carousel made with radio’s.
Made by Olivier PASCAL
March 24, 2017

React Vertical Carousel

Background Image, panel background colour and panel content all change with the carousel. Uses CSS transitions to fade between slides.
Made by Alex Boffey
February 12, 2017

Split 3D Carousel

A new spin on the carousel pattern with a split panel transition in three dimensions.
Made by Paul Noble
December 10, 2016