---
title: "Carousel"
canonical: https://sky-ui.cf.sky.com/components/carousel
---

# Carousel

An infinite scrolling carousel showcasing visual content.

## Purpose

The Carousel is an infinite slideshow for cycling through a series of content (static images or videos).

## Anatomy

The Carousel component can be broken down into the following elements -

1. **Media Area** <br /> Main area to display an image or video.

2. **Media Controls (optional)** <br /> Pause and mute buttons for video content.

3. **Peek (optional)** <br /> Shows previous and next slider item, includes a Scrim overlay.

4. **Navigation (optional)** <br /> Icon Button with arrows to navigate to previous or next slider item.

5. **Info Area (optional)** <br /> Space to add in extra content like logo, info text or a CTA. Includes a flexible Scrim overlay for better legibility.

6. **Pagination** <br /> For orientation and navigation.

### Info Area Anatomy

The info area can be broken down into the following elements -

1. **Scrim (optional)** <br /> Overlay to make the content legible.

2. **Plinth (optional)** <br /> Space for plinths.

3. **Additional text (optional)** <br /> Space to add in extra content.

4. **CTA (optional)** <br /> Optional Text Link or Button to trigger a call to action (CTA).

## Variants & States

- Breakpoint: Mobile, Tablet, Desktop, Max Width
- Appearance: Default, Light
- Info Area: on/off
- Media Controls: on/off
- Peek: on/off
- Navigation: on/off

**Media Carousel**, with every optional element turned on.
    
  **Basic Carousel**, with every optional element turned off.
    

The Carousel component is made up of subcomponents that offer further options:

**Peek (right and left)** <br /> Scrim: on/off

**Info Area**

- Scrim: on/off
- Plinth: on/off
- Text: on/off
- CTA: on/off