# Swiper 轮播图

该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：

• 内置多种指示器模式，可配置指示器位置
• 3D轮播图效果
• 可配置是否显示标题

# 平台差异说明

# 基本使用

通过list参数传入轮播图列表值，该值为一个数组，元素为对象，见如下：

• list的"image"属性为轮播图的图片路径
• list的"title"属性为需要显示的标题

说明： 某些情况下，您从服务端获取的数据，里面的数组对于图片的属性名不一定为image，如果让您再历遍修改为image属性，显示是不人性的， 所以uView提供了一个name参数，比如您数组中的图片名称为img，您可以设置u-swiper组件的name参数为img值。

<template>
	<view class="wrap">
		<u-swiper :list="list"></u-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: '/static/uView/swiper/swiper1.jpg',
						title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
					},
					{
						image: '/static/uView/swiper/swiper2.jpg',
						title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
					},
					{
						image: '/static/uView/swiper/swiper3.jpg',
						title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}
</style>

# 指示器类型

本组件内置了多种指示器，通过配置mode参数即可，有如下：

• rect-指示器为方块状
• dot-指示器为圆点
• number-指示器为数字
• round-激活的指示器为块状，未激活的未点状，为默认值
• none-不显示指示器

通过indicator-pos参数配置指示器的位置，有如下值：

• topLeft-指示器位于左上角
• topCenter-指示器位于上方中间位置
• topRight-指示器位于右上角
• bottomLeft-指示器位于左下角
• bottomCenter-指示器位于底部中间位置，为默认值
• bottomRight-指示器位于右下角

<u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>

# 是否开启3D效果

配置effect3d为true即可，该效果左右两边可以缩略形式预览前后一个swiper-item的一部分

<u-swiper :list="list" :effect3d="true"></u-swiper>

# 控制轮播效果

• autoplay-是否自动轮播，默认为true
• interval-前后两张图自动轮播的时间间隔
• duration-切换一张轮播图所需的时间
• circular-是否衔接滑动，即到最后一张时，是否可以直接转到第一张

<u-swiper :list="list" duration="3000" :circular="false"></u-swiper>

# API

# Props

# Events