Collection of free HTML and pure CSS carousel code examples: responsive, horizontal and vertical. Update of December 2019 collection. 6 new items.
Related Articles
Table of Contents
Horizontal Carousels
Links
Made with
- HTML / CSS
About a code
CSS Variables 3D Carousel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Playlist Carousel - CSS Only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
A CSS-only Carousel Slider
This carousel is created with HTML and CSS only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Carousel
Animated pure CSS carousel.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Carousel
Pure CSS carousel with thumbnails.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Responsive Sliding Carousel
Pure CSS, responsive sliding carousel.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS-Tricks Card Carousel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
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.
Links
Made with
- HTML / CSS
About a code
3D Carousel Rotating
Pure CSS 3D carousel which rotates.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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

Links
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.
Links
Made with
- HTML / CSS
About a code
CSS Carousel With Keyboard Controls
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Vertical Carousels
Links
Made with
- HTML / CSS (SCSS)
About a code
Very Simple Pure CSS Carousel
No JavaScript, tiny markup, minimal CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
CSS Vertical Carousel Animation
Infinitely rotating vertical carousel animation. CSS only.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Pure CSS Carousel
Basic carousel made with radio's.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -