:: BASE_DOC ::
| name | type | default | description | required |
|---|---|---|---|---|
| autoplay | Boolean | true | - | N |
| current | Number | 0 | - | N |
| direction | String | horizontal | options:horizontal/vertical | N |
| display-multiple-items | Number | 1 | 0.32.0 |
N |
| duration | Number | 300 | - | N |
| easing-function | String | default | 0.32.0。options:default/linear/easeInCubic/easeOutCubic/easeInOutCubic |
N |
| height | String / Number | 192 | - | N |
image-props | Object | - | 0.34.0 | N
interval | Number | 5000 | - | N
list | Array | - | 0.32.0。Typescript:string[] \| SwiperList[] interface SwiperList { value: string, ariaLabel: string }。see more ts definition | N
loop | Boolean | true | - | N
navigation | Boolean / Object / Slot | true | Typescript:SwiperNavProps \| boolean,SwiperNav API Documents。see more ts definition | N
next-margin | String / Number | 0 | 0.32.0 | N
pagination-position | String | bottom | options:top-left/top/top-right/bottom-left/bottom/bottom-right | N
previous-margin | String / Number | 0 | 0.32.0 | N
snap-to-edge | Boolean | false | 0.32.0 | N
| name | params | description |
|---|---|---|
| change | (current: number, source: SwiperChangeSource) |
see more ts definition。type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav' |
| click | (index: number) |
0.34.0 |
| name | type | default | description | required |
|---|---|---|---|---|
| current | Number | 0 | 0.34.0 |
N |
| direction | String | horizontal | 0.34.0。options:horizontal/vertical |
N |
| min-show-num | Number | 2 | - | N |
| pagination-position | String | bottom | 0.34.0。options:top-left/top/top-right/bottom-left/bottom/bottom-right |
N |
| show-controls | Boolean | false | 0.32.0 |
N |
| total | Number | 0 | 0.34.0 |
N |
| type | String | dots | Typescript:SwiperNavigationType type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'。see more ts definition |
N |
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-swiper-item-padding | 0 | -
--td-swiper-radius | @radius-large | -
--td-swiper-nav-btn-bg-color | @font-gray-3 | -
--td-swiper-nav-btn-color | @font-white-1 | -
--td-swiper-nav-btn-size | 48rpx | -
--td-swiper-nav-dot-active-color | @font-white-1 | -
--td-swiper-nav-dot-color | @font-white-2 | -
--td-swiper-nav-dot-size | 12rpx | -
--td-swiper-nav-dots-bar-active-width | 40rpx | -
--td-swiper-nav-fraction-bg-color | @font-gray-3 | -
--td-swiper-nav-fraction-color | @font-white-1 | -
--td-swiper-nav-fraction-font-size | 24rpx | -
--td-swiper-nav-fraction-height | 48rpx | -