Skip to content

Carousels

Slideshows and content sliders.

5 component(s)

Card Carousel with Peek of Next Slide – Tailwind CSS carousels preview

Card Carousel with Peek of Next Slide

Swipeable Tailwind CSS photo card carousel with scroll snap, a peeking next card, arrow buttons, dots and keyboard support.

Tailwind CSS Carousels
3D Coverflow Image Carousel – Pure CSS carousels preview

3D Coverflow Image Carousel

Coverflow-style image carousel with rotated 3D side photos, reflections, captions, dots, swipe and keyboard navigation in pure CSS and vanilla JS.

Pure CSS Carousels
Scroll-Snap Carousel – Pure CSS carousels preview

Scroll-Snap Carousel

Native CSS scroll-snap carousel with arrow buttons, synced pill dots and keyboard support, enhanced by a few lines of vanilla JavaScript.

Pure CSS Carousels
Carousel with Captions – Bootstrap 5 carousels preview

Carousel with Captions

Bootstrap 5 hero carousel with glass captions, pill indicators, previous and next buttons, a pause control and gradient SVG slides.

Bootstrap 5 Carousels
Image Carousel with Thumbnails – Tailwind CSS carousels preview

Image Carousel with Thumbnails

Tailwind CSS image carousel with a clickable thumbnail strip, captions, swipe support, arrow-key navigation and optional looping.

Tailwind CSS Carousels

What is a carousel?

A carousel, also called a slider or slideshow, shows a series of items one at a time or a few at a time in the same space, with controls to move between them. Items can be images, testimonials, product cards, hero slides or logos. Carousels appear on homepages, product galleries, onboarding screens and anywhere several items compete for limited space.

When to use a carousel

Use a carousel when the items are of similar importance and browsing them is optional, such as a product image gallery or a row of related products. Avoid hiding critical messages in later slides, since many users never advance past the first one.

Best practices

  • Provide visible previous and next buttons with accessible names, for example aria-label="Next slide".
  • Make controls usable with the keyboard and keep focus visible.
  • Avoid automatic rotation, or if you use it, add a pause button, pause on hover and focus, and stop it under prefers-reduced-motion.
  • Mark the container as a region with an aria-label and give each slide a label such as "Slide 2 of 5".
  • Support touch swipes on mobile; CSS scroll snapping provides this natively.
  • Keep slide dimensions fixed with aspect-ratio to avoid layout shift, and lazy-load images on slides that are not visible.
  • Indicators (dots) should be buttons that announce which slide they open.

Bootstrap, Tailwind CSS and pure CSS versions

The carousel examples include Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS versions. Bootstrap 5 versions use the carousel component with its JavaScript, and Bootstrap 6 versions load it as an ES module and use the theme-* colour roles for controls and indicators. Tailwind CSS versions combine utilities with a lightweight script, and pure CSS versions use scroll-snap for swipeable sliders with little or no JavaScript. Filter by framework, try the sliders in the live preview, then copy the HTML, CSS and JS from the code tabs or download the files.