> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/data/carousel.md).

# Carousel

Carousel is a sequence of slides. The user can switch slides manually or they can switch automatically after some time (via `duration` prop). Switching slides is accompanied by animation. 

{% hint style="info" %}
This component was added in **`Altrone 2.0`**
{% endhint %}

```tsx
import { Carousel, CarouselItem } from 'altrone-ui';

const SLIDES: CarouselItem[] = [
    { src: '/path/to/image/1' }, 
    { src: '/path/to/image/2' }, 
    { src: '/path/to/image/3' }
];

return <Carousel data={SLIDES} loop={true} />
```

## Ref object

Carousel component supports receiving state and managing the component via `ref` property. In case of Carousel you can programmatically navigate to another slide.&#x20;

### <mark style="color:blue;">CarouselRef</mark>

```typescript
interface CarouselRef {
    currentIndex: number;
    prev: () => void;
    next: () => void;
}
```

## Slides

### <mark style="color:blue;">CarouselItem</mark>

```typescript
type CarouselItem = {
    src: string;
}
```

## Altrone Options

{% hint style="info" %}
This feature was added in **Altrone 2.1**
{% endhint %}

In **Altrone 2.1**, a new feature (called as [Altrone Options](/altrone-ui/usage.md)) was introduced, allowing users to define default values for certain properties within this component. To achieve this, you can leverage either `global.reduceMotion` or `carousel.reduceMotion`, effectively deactivating transitions for all carousels throughout your application.

## Properties

| Property                                          | Type                                   | Description                                                                                          |
| ------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **`data`**<mark style="color:red;">**`*`**</mark> | [`CarouselItem`](#carouselitem)`[]`    | Array of slides                                                                                      |
| ref                                               | `Ref<`[`CarouselRef`](#carouselref)`>` |                                                                                                      |
| **`duration`**                                    | `number`                               | If this prop is set will switch automatically after the specified time. Default value is `undefined` |
| **`loop`**                                        | `boolean`                              | If `true`, slides will loop. Default value is `false`                                                |
| **`imageFitting`**                                | `'cover' \| 'contain'`                 | `object-fit` property for your slides. Default value is `cover`                                      |
| **`showControls`**                                | `boolean`                              | If `true` user can see a toolbar with actions. Default value is `true`                               |
| **`usePhotoViewer`**                              | `boolean`                              | If `true` user can expand current slide. Default value is `false`                                    |

## History

* **`Altrone 2.1`**:
  * added `global.reduceMotion` and `carousel.reduceMotion` Altrone Option
* **`Altrone 2.0`**: initial release