Explore our collection of CSS Carousels! This meticulously curated compilation presents a wide array of free HTML and pure CSS carousel code examples, featuring responsive, horizontal, and vertical designs. Sourced from reputable platforms like CodePen, GitHub, and other valuable resources, our collection offers a diverse range of carousel options. With the July 2023 update, we are excited to introduce six new additions to our ever-expanding collection.
Discover our handpicked selection and enhance your web design projects with these innovative CSS carousels!
Related Articles
Table of Contents
Horizontal Carousels
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS (TypeScript)
About a code
Pure CSS Jake's Instagram
There is an animating carousel of Jake's "photos" that resembles the Instagram post, using only SCSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Polaroid-Like Photo Carousel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only 3D Images Carousel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Only Infinite Carousel
No duplicated images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Expand Image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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
About a code
CSS Vertical Carousel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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: -