---
name: Swiper
title: 轮播
category: 识图容器
owner: 赵龙飞
---

## 示例
```atom 基础示例
<template>
    <view class="swiper-test">
        <swiper class="swiper-main"
                :indicator-dots="true"
                :autoplay="false"
                :circular="true"
                :interval="3000"
                :duration="500"
                :vertical="false"
                previous-margin="10px"
                next-margin="10px"
                :display-multiple-items="2"
                @change="onSwiperChange"
                @animationfinish="onAnimationfinish">
            <swiper-item v-for="(img,index) in imgs">
                <image :src="img" class="slide-image"/>
            </swiper-item>
        </swiper>
    </view>
</template>

<script type="config">
    {
        components: {
            canvas: 'components/Canvas/Canvas'
        }
    }
</script>

<script>
    export default {
        data() {
            return {
                imgs: [
                    "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=955704975,2507359007&fm=173&s=32A2DC4D4E12344D4899DCB80300C013&w=218&h=146&img.JPEG",
                    "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=984374101,2617012451&fm=173&s=20A24CB176BA0D882C042D700300C092&w=218&h=146&img.JPEG",
                    "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1663594687,1286054050&fm=173&s=EAA608C484D2006B5680719A0300E0C1&w=218&h=146&img.JPEG"
                ]
            };
        },
        methods: {
            onSwiperChange(e) {
                console.log('onSwiperChange', e)
            },
            onAnimationfinish(e) {
                console.log('onAnimationfinish', e)
            }
        }
    }
</script>

<style scoped>
    .swiper-test {
        width: 100%;
        height: 200px;
        background: yellow;
    }

    .swiper-main {
        height: 100%;
    }

    .slide-image {
        width: 100%;
        height: 100%;
    }
</style>
```
## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
indicatorDots | boolean | false | 可选 | 是否显示面板指示点 | -
indicatorColor | string | rgba(0, 0, 0, .3) | 可选 | 指示点颜色 | -
indicatorActiveColor | string | #333 | 可选 | 当前选中的指示点颜色件 | -
autoplay | boolean | false | 可选 | 是否自动切换 | -
current | number | 0 | 可选 | 当前所在页面的&nbsp;index | -
currentItemId | string |  | 可选 | 当前所在滑块的&nbsp;item-id&nbsp;，不能与&nbsp;current&nbsp;被同时指定 | -
interval | number | 5000 | 可选 | 自动切换时间间隔 | -
duration | number | 500 | 可选 | 滑动动画时长 | -
circular | boolean | false | 可选 | 是否采用衔接滑动 | -
vertical | boolean | false | 可选 | 滑动方向是否为纵向 | -
previousMargin | string | 0px | 可选 | 前边距，可用于露出前一项的一小部分 | -
nextMargin | string | 0px | 可选 | 后边距，可用于露出后一项的一小部分 | -
displayMultipleItems | number | 1 | 可选 | 同时显示的滑块数量 | -

### Slots



名称 | 描述
--- | ---
default | -