Post thumbnail: 23 CSS Carousels

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

Demo image: Multidirectional Email Carousel

Author

  • Gary Wesolowski

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.

Demo image: Nice Responsive Testimonial Carousel

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.

Demo image: Infinite Autoplay Carousel

Author

  • Jack Oliver

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.

Demo Image: Carousel
Demo Image: Carousel

Carousel

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

Demo Image: 3D Smooth Carousel
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
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
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
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
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
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
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

Demo image: Pure CSS Carousels

Author

  • Jhey

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
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
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
Demo Image: Ambilight Carousel

Ambilight Carousel

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

Demo Image: Carousel Team
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
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
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
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

Vertical Carousels

Demo image: Vertical Carousel

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

back to top