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

  1. Bootstrap Carousels
  2. JavaScript Carousels
  3. jQuery Carousels
  4. React Carousels
  5. Vue Carousels

Table of Contents

  1. Horizontal Carousels
  2. Vertical Carousels

Horizontal Carousels

Author

  • Andy

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

Author

  • Temani Afif

Links

Made with

  • HTML / CSS (SCSS)

About a code

Polaroid-Like Photo Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Links

Made with

  • HTML / CSS

About a code

CSS Only 3D Images Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

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

Author

  • Kristen

Links

Made with

  • HTML / CSS (SCSS)

About a code

Expand Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chris Neale

Links

Made with

  • HTML / CSS

About a code

CSS Variables 3D Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aybüke Ceylan

Links

Made with

  • HTML / CSS (SCSS)

About a code

Playlist Carousel - CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Christian Schaefer

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

Author

  • TianyiLi

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

Author

  • Ronny Siikaluoma

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

Author

  • januaryofmine

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

Author

  • William Goldsworthy

Links

Made with

  • HTML / CSS

About a code

CSS-Tricks Card Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Multidirectional Email Carousel

Author

  • Gary Wesolowski

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.

Author

  • Claudiu Lazar

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

Demo image: Infinite Autoplay Carousel

Author

  • Jack Oliver

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.

Demo image: Pure CSS Carousels

Author

  • Jhey

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.

Author

  • David Lewis

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

Author

  • Arron Hunt

Links

Made with

  • HTML / CSS

About a code

CSS Vertical Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ben Evans

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

Author

  • Aija

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

Author

  • Olivier PASCAL

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