---
name: "swiper"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "swiper - Swiper view container"
---

## swiper

> [VERSION] Base Library >= 2.10.0

### Description

Swiper view container for carousel display.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `indicator-dots` | `boolean` | No | `false` | Whether to show indicator dots |
| `indicator-color` | `string` | No | `"rgba(0,0,0,0.3)"` | Indicator color |
| `indicator-active-color` | `string` | No | `"#333"` | Color of the selected indicator dot |
| `vertical` | `boolean` | No | `false` | Whether the sliding direction is vertical |
| `autoplay` | `boolean` | No | `false` | Whether to auto switch |
| `circular` | `boolean` | No | `false` | Whether to enable circular sliding |
| `interval` | `number` | No | `5000` | Interval for automatic switching, in milliseconds |
| `duration` | `number` | No | `500` | Slide animation duration, in milliseconds |
| `current` | `number` | No | `0` | Index of the current slide |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `change` | `(event: SwiperChangeEvent) => void` | Fires when current changes |
| `animationfinish` | `(event: SwiperAnimationFinishEvent) => void` | Fires when the animation ends |

**SwiperChangeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `SwiperChangeDetail` | Event data |

**SwiperAnimationFinishEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"animationfinish"` | Event type |
| `detail` | `SwiperChangeDetail` | Event data |

### Examples

#### Autoplay and indicator dots

*index.tyml*

```xml
// index.tyml
<swiper
  autoplay="{{true}}"
  circular="{{true}}"
  interval="{{3000}}"
  duration="{{500}}"
  indicator-dots="{{true}}"
  indicator-color="rgba(255,255,255,0.5)"
  indicator-active-color="#fff"
  class="swiper"
  bind:change="onChange"
>
  <swiper-item ty:for="{{list}}" ty:key="*this">
    <view class="item" style="background-color: {{item.color}};">
      <text class="item-text">{{item.text}}</text>
    </view>
  </swiper-item>
</swiper>
<text class="info">Current: {{current + 1}} / {{list.length}}</text>
```

*index.tyss*

```css
.swiper { height: 300rpx; }
.item {
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-text { color: #fff; font-size: 36rpx; }
.info { display: block; text-align: center; margin-top: 16rpx; font-size: 28rpx; color: #666; }
```

*index.js*

```javascript
Page({
  data: {
    current: 0,
    list: [
      { text: 'Page 1', color: '#1890ff' },
      { text: 'Page 2', color: '#52c41a' },
      { text: 'Page 3', color: '#faad14' },
    ],
  },
  onChange(e) {
    this.setData({ current: e.detail.current });
  },
});
```

#### Vertical swiping and manual switching

*index.tyml*

```xml
// index.tyml
<swiper
  vertical="{{true}}"
  current="{{current}}"
  indicator-dots="{{true}}"
  indicator-color="#ccc"
  indicator-active-color="#333"
  class="swiper"
  bind:animationfinish="onFinish"
>
  <swiper-item><view class="item item-a"><text>A</text></view></swiper-item>
  <swiper-item><view class="item item-b"><text>B</text></view></swiper-item>
  <swiper-item><view class="item item-c"><text>C</text></view></swiper-item>
</swiper>
<view class="btn-row">
  <button size="mini" bindtap="prev">Previous</button>
  <button size="mini" bindtap="next">Next</button>
</view>
```

*index.tyss*

```css
.swiper { height: 400rpx; }
.item {
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  color: #fff;
}
.item-a { background-color: #1890ff; }
.item-b { background-color: #52c41a; }
.item-c { background-color: #faad14; }
.btn-row {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-top: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: { current: 0 },
  prev() {
    var cur = this.data.current;
    this.setData({ current: cur > 0 ? cur - 1 : 2 });
  },
  next() {
    var cur = this.data.current;
    this.setData({ current: cur < 2 ? cur + 1 : 0 });
  },
  onFinish(e) {
    console.log('Animation ended, current index:', e.detail.current);
  },
});
```