> ## 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.

# スライダー

> YiDA スライダーコンポーネントの完全ガイド。カルーセルコンテンツ、切り替え効果、ナビゲーションなどの属性設定を解説し、複数コンテンツをスライドショー形式で横並びに表示する方法を紹介します。

スライダーは、複数のコンテンツをページ上でスライドショー形式に横並びで表示するコンポーネントです。

## 使用シーン

* カルーセル項目が相互に独立しており、コンテンツやデータに論理的な関連性がない場合。
* 単一画像カルーセル：主にプロモーションバナーの掲載に用いられ、比較的固定的な位置に配置されるモジュールとして機能します。
* 複数画像カルーセル：ユニット情報の閲覧に使用します。

## コンポーネントの例

## コンポーネントの属性

| 属性                     | 説明                                                        | タイプ                                                                         | デフォルト      |
| ---------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- |
| `animation`            | 切り替え効果のタイプを選択します。slide：横スライド、fade：フェード切り替え。               | `'slide' \| 'fade'`                                                         | `'slide'`  |
| `arrowDirection `      | 矢印の表示方向を制御します。                                            | `'hoz' \|'ver'`                                                             | `'hoz'`    |
| `arrowPosition`        | 矢印の表示位置を制御します。                                            | `'inner' \| 'outer'`                                                        | `'inner'`  |
| `arrowSize`            | 矢印のサイズを制御します。                                             | `'medium' \| 'large'`                                                       | `'medium'` |
| `arrows`               | カルーセル項目の矢印を有効にするかどうか。                                     | `boolean`                                                                   | `true`     |
| `autoplay`             | カルーセル項目を自動再生するかどうかを選択します。                                 | `boolean`                                                                   | `false`    |
| `autoplaySpeed`        | カルーセル項目の自動再生速度（ms 単位）。                                    | `number`                                                                    | `3000`     |
| `centerMode`           | センターモードを有効にするかどうか。                                        | `boolean`                                                                   | `false`    |
| `diyContents`          | カスタムモードの入力データ。**isDiy** が true に設定されている場合にのみ有効です。         | `any[]`                                                                     | `[]`       |
| `diyContentsRender`    | カスタムモードのレンダー関数。**isDiy** が true に設定されている場合にのみ有効です。        | `(item: any, index: number) => ReactNode`                                   | -          |
| `dots`                 | ナビゲーションドットを有効にするかどうか。                                     | `boolean`                                                                   | `true`     |
| `dotsDirection`        | ナビゲーションドットの表示位置。                                          | `'hoz' \| 'ver'`                                                            | `'hoz'`    |
| `focusOnSelect`        | 複数画像カルーセルモードで、項目をクリックして選択した後に自動的に中央揃えします。                 | `boolean`                                                                   | `false`    |
| `images`               | カルーセル項目を設定します。                                            | [SliderDataSource\[\]](/ja/open/yida/components/interface#sliderdatasource) | `[]`       |
| `isDiy`                | カスタムモードを有効にします。                                           | `boolean`                                                                   | `false`    |
| `lazyLoad`             | 遅延読み込みモードを有効にするかどうか。                                      | `boolean`                                                                   | `false`    |
| `margin`               | カルーセル項目間の間隔を制御します。                                        | `number`                                                                    | `10`       |
| `slideDirection`       | スライド方向を制御します。                                             | `'hoz' \| 'ver'`                                                            | `'hoz'`    |
| `slideImageHeight`     | カルーセル画像の高さ（px 単位またはパーセンテージ）。                              | `string`                                                                    | `'300px'`  |
| `slideImageHeightAuto` | カルーセル項目の高さの自動調整を有効にします（画像はアスペクト比が保持されます）。                 | `boolean`                                                                   | `false`    |
| `slideImageWidth`      | カルーセル項目の幅を設定します。                                          | `string`                                                                    | `'100%'`   |
| `slidesToScroll`       | 同時にスライドするカルーセル項目数を制御します。                                  | `number`                                                                    | `1`        |
| `slidesToShow`         | 同時に表示するカルーセル項目数を制御します。**type** 属性が multi に設定されている場合に有効です。 | `number`                                                                    | `2`        |
| `speed`                | スライド速度（ms 単位）。                                            | `number`                                                                    | `500`      |
| `triggerType`          | ドットナビゲーションのトリガー方法。                                        | `'click' \| 'hover'`                                                        | `'click'`  |
| `type`                 | カルーセルモードを設定します。single：単一項目カルーセル、multi：複数項目カルーセル。          | `'single' \| 'multi'`                                                       | `'single'` |