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.
- Horizontal Carousels
- Vertical Carousels
Author
- Gary Wesolowski
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
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
About the code
Infinite Autoplay Carousel
Useful for startup landing pages where you need to display brand partners and other cool logos or whatever.
Demo Image: Carousel
Carousel
Carousel with React.js.
Made by Andy Pagès
February 16, 2017
Demo Image: 3D Smooth Carousel
3D Smooth Carousel
3D smooth carousel/slider with HTML, CSS and JavaScript.
Made by Eduardo Allegrini
February 4, 2017
Demo Image: Infinite Automatic Carousel
Infinite Automatic Carousel
HTML, CSS and JavaScript infinite automatic carousel.
Made by Julien Lejeune
January 31, 2017
Demo Image: Hover-Carousel
Hover-Carousel
Moves left or right in relation to the mouse position inside it’s area.
Made by Yair Even Or
January 4, 2017
Demo Image: HTML, CSS and JavaScript Carousel
HTML, CSS and JavaScript Carousel
A simple carousel.
Made by DobladoV
November 23, 2016
Demo Image: Mobile Carousel
Mobile Carousel
HTML and CSS material cards carousel.
Made by Kate Hummer
October 21, 2016
Demo Image: Looping Instagram Feed Carousel
Looping Instagram Feed Carousel
Latest posts from Instagram pulled into a slick.js carousel.
Made by Ryan Mulligan
August 8, 2016
Demo Image: Simple Synchronised Carousel
Simple Synchronised Carousel
This is the simple synchronised carousel used awesome Slick.js carousel.
Made by Rian Ariona
July 25, 2016
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.
Demo Image: Horizontal 3D Carousels
Horizontal 3D Carousels
HTML and CSS horizontal carousels. Just hover the boxes.
Made by Daniel Racine
August 10, 2015
Demo Image: CSS Carousel
CSS Carousel
HTML and CSS 3D transform colorful animated carousel.
Made by Edmundo Santos
August 1, 2015
Demo Image: Ambilight Carousel
Ambilight Carousel
Bootstrap carousel with ambilight.
Made by adobewordpress
May 13, 2015
Demo Image: Carousel Team
Carousel Team
Concept carousel with some basic functions such as auto play.
Made by Marco Barría
January 27, 2015
Demo Image: 3D Carousel
3D Carousel
3D Carousel with Waterwheel-carousel.js
Made by Juan C. Irizar
December 3, 2014
Demo Image: 3D Cube Carousel
3D Cube Carousel
4-sided carousel/slider in 3D.
Made by Derek Wheelden
February 5, 2014
Demo Image: CSS Carousel With Keyboard Controls
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
Author
- Danil Goncharenko
Made with
- HTML
- CSS
- JavaScript (jQuery.js, TweenMax.js)
About the code
Vertical Carousel
Vertical carousel with TweenMax.js
Demo Image: Pure CSS Carousel
Pure CSS Carousel
Basic carousel made with radio’s.
Made by Olivier PASCAL
March 24, 2017
Demo Image: React Vertical Carousel
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
Demo Image: Split 3D Carousel
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