zhsw_wechat/miniprogram_npm/tdesign-miniprogram/swiper

:: BASE_DOC ::

API

Swiper Props

name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N 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

Swiper Events

name | params | description -- | -- | -- change | (current: number, source: SwiperChangeSource) | see more ts definition。
type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'
click | (index: number) | 0.34.0 image-load | (index: number) | 1.1.4

Swiper External Classes

className | Description -- | -- t-class | - t-class-image | - t-class-nav | - t-class-next-image | - t-class-prev-image | -

SwiperNav Props

name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N 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

SwiperNav External Classes

className | Description -- | -- t-class | -

CSS Variables

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