Slider - DingTalk Help Center

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