# Slider

- category: UI
- chinese: 轮播
- type: UI Component

---


## Usage

When pictures broadcast Repeatedly.

## API

### Slider

| Attribute       | Description                       | Type     | Default |
| --------------- | --------------------------------- | -------- | ------- |
| width           | Width                             | string   | 750     |
| height          | Height                            | string   | 352     |
| autoplay        | auto play                         | boolean  | false   |
| showsPagination | pagination                        | boolean  | true    |
| loop            | loop play                         | boolean  | true    |
| autoplayTimeout | loop interval                     | boolean  | true    |
| paginationStyle | pagination style                  | array    | null    |
| onChange        | change event                      | function | null    |
| index           | Start by default from the (index) | string   | 0       |

### slideTo Instance Methods

`this.refs.Slider.slideTo(index)` - Switch the Slider from the outside

### paginationStyle Special Field Interpretation

| Attribute         | Description            | Type                | Default                  |
| ----------------- | ---------------------- | ------------------- | ------------------------ |
| itemSize          | dot's size             | number              | 8                        |
| itemColor         | Unselected dot's color | string，rgb or rgba | rgba(255, 255, 255, 0.5) |
| itemSelectedColor | selected dot's color   | string，rgb or rgba | rgb(255, 80, 0)          |


### The experimental features, not stable

| Attribute | Description                                                                                  | Type     | Default |
| --------- | -------------------------------------------------------------------------------------------- | -------- | ------- |
| accuracy  | Sliding trigger event accuracy                                                               | string   | 1       |
| onScroll  | callback for the slide trigger event，its trigger frequency is related to the event accuracy | function | {}      |


## The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />