> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

> Slider component documentation, covering carousel content, transition effects, and other property configurations for horizontally displaying multiple content items in a slideshow format.

The Slider is a component that displays multiple content items horizontally on a page in a slideshow format.

## When to Use

* Carousel items are independent of each other, with no logical relationship in content or data.
* Single-image carousel: typically used to host promotional banners and serves as a module with a relatively fixed position.
* Multi-image carousel: used to browse unit information.

## Component Example

## Component Properties

| Attribute              | Description                                                                                                                | Type                                                                     | Default    |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ---------- |
| `animation`            | Selects the transition effect type. slide: horizontal sliding; fade: fade transition.                                      | `'slide' \| 'fade'`                                                      | `'slide'`  |
| `arrowDirection `      | Controls the direction in which arrows are displayed.                                                                      | `'hoz' \|'ver'`                                                          | `'hoz'`    |
| `arrowPosition`        | Controls the position of the arrows.                                                                                       | `'inner' \| 'outer'`                                                     | `'inner'`  |
| `arrowSize`            | Controls the size of the arrows.                                                                                           | `'medium' \| 'large'`                                                    | `'medium'` |
| `arrows`               | Whether to enable arrows for carousel items.                                                                               | `boolean`                                                                | `true`     |
| `autoplay`             | Selects whether to autoplay carousel items.                                                                                | `boolean`                                                                | `false`    |
| `autoplaySpeed`        | Autoplay speed of carousel items, in ms.                                                                                   | `number`                                                                 | `3000`     |
| `centerMode`           | Whether to enable center mode.                                                                                             | `boolean`                                                                | `false`    |
| `diyContents`          | Input data for custom mode. Only takes effect when **isDiy** is set to true.                                               | `any[]`                                                                  | `[]`       |
| `diyContentsRender`    | Render function for custom mode. Only takes effect when **isDiy** is set to true.                                          | `(item: any, index: number) => ReactNode`                                | -          |
| `dots`                 | Whether to enable navigation dots.                                                                                         | `boolean`                                                                | `true`     |
| `dotsDirection`        | Display position of navigation dots.                                                                                       | `'hoz' \| 'ver'`                                                         | `'hoz'`    |
| `focusOnSelect`        | In multi-image carousel mode, automatically centers an item after it is clicked and selected.                              | `boolean`                                                                | `false`    |
| `images`               | Configures the carousel items.                                                                                             | [SliderDataSource\[\]](/open/yida/components/interface#sliderdatasource) | `[]`       |
| `isDiy`                | Enables custom mode.                                                                                                       | `boolean`                                                                | `false`    |
| `lazyLoad`             | Whether to enable lazy loading mode.                                                                                       | `boolean`                                                                | `false`    |
| `margin`               | Controls the spacing between carousel items.                                                                               | `number`                                                                 | `10`       |
| `slideDirection`       | Controls the sliding direction.                                                                                            | `'hoz' \| 'ver'`                                                         | `'hoz'`    |
| `slideImageHeight`     | Height of the carousel image, in px or as a percentage.                                                                    | `string`                                                                 | `'300px'`  |
| `slideImageHeightAuto` | Enables adaptive height for carousel items (aspect ratio is preserved for images).                                         | `boolean`                                                                | `false`    |
| `slideImageWidth`      | Sets the width of carousel items.                                                                                          | `string`                                                                 | `'100%'`   |
| `slidesToScroll`       | Controls the number of carousel items that slide at the same time.                                                         | `number`                                                                 | `1`        |
| `slidesToShow`         | Controls the number of carousel items displayed at the same time. Takes effect when the **type** property is set to multi. | `number`                                                                 | `2`        |
| `speed`                | Sliding speed, in ms.                                                                                                      | `number`                                                                 | `500`      |
| `triggerType`          | Trigger method for dot navigation.                                                                                         | `'click' \| 'hover'`                                                     | `'click'`  |
| `type`                 | Configures the carousel mode. single: single-item carousel; multi: multi-item carousel.                                    | `'single' \| 'multi'`                                                    | `'single'` |