Slider
Slider component displays multiple content items horizontally on the page in a slideshow manner.
When to use
- Carousel content is independent, with no logical relationship in content or data between previous and next items.
- Single image carousel: This style is usually used to carry operation banners, which is a relatively fixed position module.
- Multi-image carousel: Unit information browsing.
Component Example
Component Properties
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
animation | Used to select carousel item animation type, slide: left/right sliding, fade: fade transition | 'slide' | 'fade' | 'slide' |
arrowDirection | Control arrow display direction | 'hoz' |'ver' | 'hoz' |
arrowPosition | Used to control arrow position | 'inner' | 'outer' | 'inner' |
arrowSize | Used to control arrow size | 'medium' | 'large' | 'medium' |
arrows | Whether to enable carousel item arrows | boolean | true |
autoplay | Used to select whether to auto play carousel items | boolean | false |
autoplaySpeed | Carousel item auto play speed, unit: ms | number | 3000 |
centerMode | Whether to enable center mode | boolean | false |
diyContents | Used to input custom mode data, only effective when isDiy is set to true | any[] | [] |
diyContentsRender | Used to render custom mode rendering function, only effective when isDiy is set to true | (item: any, index: number) => ReactNode | - |
dots | Whether to enable navigation dots | boolean | true |
dotsDirection | Navigation dots display position | 'hoz' | 'ver' | 'hoz' |
focusOnSelect | Used for multi-image carousel, automatically center after clicking to select | boolean | false |
images | Used to configure carousel items | [] | |
isDiy | Used to enable custom mode | boolean | false |
lazyLoad | Whether to enable lazy loading mode | boolean | false |
margin | Used to control carousel item spacing | number | 10 |
slideDirection | Used to control carousel direction | 'hoz' | 'ver' | 'hoz' |
slideImageHeight | Carousel image height, unit is px or % | string | '300px' |
slideImageHeightAuto | Enable carousel item height adaptive (images will maintain aspect ratio) | boolean | false |
slideImageWidth | Used to set carousel item width | string | '100%' |
slidesToScroll | Used to control the number of carousel items scrolled simultaneously | number | 1 |
slidesToShow | Used to control the number of carousel items displayed simultaneously, effective when type property is multi | number | 2 |
speed | Carousel speed, unit: ms | number | 500 |
triggerType | Dot navigation trigger method | 'click' | 'hover' | 'click' |
type | Used to configure carousel mode, single: single item carousel, multi: multiple item carousel | 'single' | 'multi' | 'single' |