Slider - DingTalk Help Center

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[]	`[]`
`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'`