25+ Beautiful CSS Carousels (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and pure CSS carousel code examples. This list includes responsive carousels; both horizontal and vertical.
1. Pure Css Carousel
Author: TianyiLi (tianyili)
Links: Source Code / Demo
Created on: December 6, 2019
Made with: HTML, CSS
2. CSS Carousel
A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style which translates the images. Values are hardcoded...Read More
Author: Will (wa23)
Links: Source Code / Demo
Created on: August 27, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: vue, carousel, slides, css, bootstrap
3. CSS-Tricks Card Carousel
Author: William Goldsworthy (william-goldsworthy)
Links: Source Code / Demo
Created on: March 26, 2019
Made with: HTML, CSS
4. Multidirectional Email Carousel
Carousel type build that scrolls over large background image using directional arrows. Unsupported environments will display a fallback static image. 14/04/2020 - Quick fix to add html entity arrows as placeholder images were gone.
Author: Gary Wesolowski (Gwesolo)
Links: Source Code / Demo
Created on: April 13, 2018
Made with: HTML, CSS, JS
Tags: kinetic, email, carousel, interactive email, html-email
5. [CSS] Infinite Autoplay Carousel
Useful for startup landing pages where you need to display brand partners and other cool logos or whatever. Enjoy. :)
Author: Jack Oliver (jackoliver)
Links: Source Code / Demo
Created on: November 3, 2017
Made with: HTML, SCSS
Tags: css, carousel, autoplay, animation, ui
6. CSS Carousel - Pure CSS Carousels 🎪🐎
Pure CSS "carousel"(heavy emphasis on the quotes there) Leveraging use of how elements behave in the DOM in combination with features of CSS makes implementing a pure CSS "carousel" relatively trivial. Read more in a blog post here Enjoy!
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: May 23, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css, css3, carousel, stylus, css first
7. 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.
Author: David Lewis (dp_lewis)
Links: Source Code / Demo
Created on: June 29, 2014
Made with: HTML, CSS, JS
Tags: css, html, form, carousel
8. CSS Vertical Carousel Animation
Infinitely rotating vertical carousel animation. CSS only.
Author: Aija (aija)
Links: Source Code / Demo
Created on: August 3, 2019
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css-animation, css-carousel, vertical-carousel, css vertical carousel, carousel
9. Pure CSS Carousel
Basic carousel made with radio's.
Author: Olivier PASCAL (pascaloliv)
Links: Source Code / Demo
Created on: May 19, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, nojs, carousel, cssonly
10. Pure CSS Carousel
Author: Anca Spatariu (ancaspatariu)
Links: Source Code / Demo
Created on: February 28, 2017
Made with: HTML, CSS
11. Pure CSS Slider
Pure CSS Slider. No JS. Because it is possieble!
Author: Damian Drygiel (drygiel)
Links: Source Code / Demo
Created on: October 15, 2013
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: slider, css, nojs, viewer, html5
12. Pure CSS3 Text Carousel
This is a pure CSS3 Text Carousel, for all of your quotes and text scrolling needs.
Author: Cassidy Williams (cassidoo)
Links: Source Code / Demo
Created on: March 3, 2016
Made with: HTML, CSS
Tags: css3 carousel nojs
13. CSS Carousel
Author: Alexander Repeta (Luxplanjay)
Links: Source Code / Demo
Created on: February 24, 2018
Made with: HTML, CSS
14. Basic Vertical CSS Carousel
Author: yeoli-thm (yeoli-thm)
Links: Source Code / Demo
Made with: HTML, CSS
15. Full Css Carousel With Text Animation
Author: Gurprit Sahota (gurprit)
Links: Source Code / Demo
Created on: June 1, 2014
Made with: HTML, CSS
Tags: css, carousel
16. Pure Css Carousel
Author: Andrew Chaika (andrewchaika)
Links: Source Code / Demo
Created on: July 12, 2016
Made with: HTML, CSS
Tags: carousel, css, purecss
17. Testimonial Slider Pure CSS
Author: MAHESH AMBURE (maheshambure21)
Links: Source Code / Demo
Created on: March 8, 2016
Made with: HTML, CSS
18. Pure CSS Carousel That Preserves History
An attempt to create a CSS only carousel control that doesn't require the user to click the back button for every interaction they make
Author: Keith Clark (keithclark)
Links: Source Code / Demo
Created on: May 25, 2013
Made with: HTML, CSS
Tags: css
19. Pure CSS Image Slider
Links: Source Code / Demo
Made with: HTML, CSS
Tags: 3.3.0, slider
20. Testimonial (Client-review)
bootstrap testimonial using jquery and owl carousel
Author: Aashima (Aashima)
Links: Source Code / Demo
Created on: September 10, 2017
Made with: HTML, CSS
Tags: testimonial, owl carousel, client, our, responsive
21. Untitled
Author: Prathamesh J. Chatorikar (Chatorikar)
Links: Source Code / Demo
Created on: February 8, 2020
Made with: HTML, CSS
Horizontal Carousels
1. CSS Carousel
A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style which translates the images. Values are hardcoded...Read More
Author: Will (wa23)
Links: Source Code / Demo
Created on: August 27, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: vue, carousel, slides, css, bootstrap
2. CSS Carousel - Pure CSS Carousels 🎪🐎
Pure CSS "carousel"(heavy emphasis on the quotes there) Leveraging use of how elements behave in the DOM in combination with features of CSS makes implementing a pure CSS "carousel" relatively trivial. Read more in a blog post here Enjoy!
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: May 23, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css, css3, carousel, stylus, css first
3. Pure Css Carousel
Author: TianyiLi (tianyili)
Links: Source Code / Demo
Created on: December 6, 2019
Made with: HTML, CSS
4. Multidirectional Email Carousel
Carousel type build that scrolls over large background image using directional arrows. Unsupported environments will display a fallback static image. 14/04/2020 - Quick fix to add html entity arrows as placeholder images were gone.
Author: Gary Wesolowski (Gwesolo)
Links: Source Code / Demo
Created on: April 13, 2018
Made with: HTML, CSS, JS
Tags: kinetic, email, carousel, interactive email, html-email
5. CSS-Tricks Card Carousel
Author: William Goldsworthy (william-goldsworthy)
Links: Source Code / Demo
Created on: March 26, 2019
Made with: HTML, CSS
6. 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.
Author: David Lewis (dp_lewis)
Links: Source Code / Demo
Created on: June 29, 2014
Made with: HTML, CSS, JS
Tags: css, html, form, carousel
7. [CSS] Infinite Autoplay Carousel
Useful for startup landing pages where you need to display brand partners and other cool logos or whatever. Enjoy. :)
Author: Jack Oliver (jackoliver)
Links: Source Code / Demo
Created on: November 3, 2017
Made with: HTML, SCSS
Tags: css, carousel, autoplay, animation, ui
Vertical Carousels
1. CSS Vertical Carousel Animation
Infinitely rotating vertical carousel animation. CSS only.
Author: Aija (aija)
Links: Source Code / Demo
Created on: August 3, 2019
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css-animation, css-carousel, vertical-carousel, css vertical carousel, carousel
2. Pure CSS Carousel
Basic carousel made with radio's.
Author: Olivier PASCAL (pascaloliv)
Links: Source Code / Demo
Created on: May 19, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, nojs, carousel, cssonly
More Awesome Lists:
Share: