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

> Dokumentasi komponen Slider di YiDA — pelajari konfigurasi konten carousel, efek transisi, dan properti lainnya untuk menampilkan beberapa item konten secara horizontal dalam format slideshow.

Slider adalah komponen yang menampilkan beberapa item konten pada halaman secara horizontal dalam format slideshow.

## Kapan digunakan

* Item carousel bersifat independen satu sama lain, tanpa keterkaitan logis dari sisi konten maupun data.
* Carousel gambar tunggal: gaya ini umumnya digunakan untuk menampung banner promosi dan berfungsi sebagai modul dengan posisi yang relatif tetap.
* Carousel multi-gambar: untuk menelusuri informasi unit.

## Contoh komponen

## Properti komponen

| Atribut                | Deskripsi                                                                                                             | Tipe                                                                        | Default    |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- |
| `animation`            | Memilih tipe efek transisi. slide: geser horizontal; fade: transisi memudar.                                          | `'slide' \| 'fade'`                                                         | `'slide'`  |
| `arrowDirection `      | Mengontrol arah tampilan panah.                                                                                       | `'hoz' \|'ver'`                                                             | `'hoz'`    |
| `arrowPosition`        | Mengontrol posisi panah.                                                                                              | `'inner' \| 'outer'`                                                        | `'inner'`  |
| `arrowSize`            | Mengontrol ukuran panah.                                                                                              | `'medium' \| 'large'`                                                       | `'medium'` |
| `arrows`               | Mengaktifkan panah pada item carousel atau tidak.                                                                     | `boolean`                                                                   | `true`     |
| `autoplay`             | Menentukan apakah item carousel diputar otomatis.                                                                     | `boolean`                                                                   | `false`    |
| `autoplaySpeed`        | Kecepatan pemutaran otomatis item carousel, dalam ms.                                                                 | `number`                                                                    | `3000`     |
| `centerMode`           | Mengaktifkan mode tengah atau tidak.                                                                                  | `boolean`                                                                   | `false`    |
| `diyContents`          | Data input untuk mode kustom. Hanya berlaku ketika **isDiy** disetel ke true.                                         | `any[]`                                                                     | `[]`       |
| `diyContentsRender`    | Fungsi render untuk mode kustom. Hanya berlaku ketika **isDiy** disetel ke true.                                      | `(item: any, index: number) => ReactNode`                                   | -          |
| `dots`                 | Mengaktifkan titik navigasi atau tidak.                                                                               | `boolean`                                                                   | `true`     |
| `dotsDirection`        | Posisi tampilan titik navigasi.                                                                                       | `'hoz' \| 'ver'`                                                            | `'hoz'`    |
| `focusOnSelect`        | Pada mode carousel multi-gambar, memusatkan item secara otomatis setelah diklik dan dipilih.                          | `boolean`                                                                   | `false`    |
| `images`               | Mengonfigurasi item carousel.                                                                                         | [SliderDataSource\[\]](/id/open/yida/components/interface#sliderdatasource) | `[]`       |
| `isDiy`                | Mengaktifkan mode kustom.                                                                                             | `boolean`                                                                   | `false`    |
| `lazyLoad`             | Mengaktifkan mode lazy loading atau tidak.                                                                            | `boolean`                                                                   | `false`    |
| `margin`               | Mengontrol jarak antar item carousel.                                                                                 | `number`                                                                    | `10`       |
| `slideDirection`       | Mengontrol arah geser.                                                                                                | `'hoz' \| 'ver'`                                                            | `'hoz'`    |
| `slideImageHeight`     | Tinggi gambar carousel, dalam px atau sebagai persentase.                                                             | `string`                                                                    | `'300px'`  |
| `slideImageHeightAuto` | Mengaktifkan tinggi adaptif otomatis untuk item carousel (rasio aspek gambar dipertahankan).                          | `boolean`                                                                   | `false`    |
| `slideImageWidth`      | Menyetel lebar item carousel.                                                                                         | `string`                                                                    | `'100%'`   |
| `slidesToScroll`       | Mengontrol jumlah item carousel yang bergeser secara bersamaan.                                                       | `number`                                                                    | `1`        |
| `slidesToShow`         | Mengontrol jumlah item carousel yang ditampilkan secara bersamaan. Berlaku ketika properti **type** disetel ke multi. | `number`                                                                    | `2`        |
| `speed`                | Kecepatan geser, dalam ms.                                                                                            | `number`                                                                    | `500`      |
| `triggerType`          | Metode pemicu untuk navigasi titik.                                                                                   | `'click' \| 'hover'`                                                        | `'click'`  |
| `type`                 | Mengonfigurasi mode carousel. single: carousel item tunggal; multi: carousel multi-item.                              | `'single' \| 'multi'`                                                       | `'single'` |