uniapp开发03-轮播图组件swiper的简单使用案例！这个仅仅是官方提供的一个轮播图组件啊。实际上我们项目开发的时候，会应用到其他第三方公司的轮播图组件资源！效果更强大。兼容性更强。

---

废话不多说，我们直接上代码。分析代码。

<template>
	<view>

		<!--演示轮播图组件效果 swiper-->
		<swiper class="swiper" autoplay="true" interval="3000" circular>
			<swiper-item class="item">
				<image src="/static/images/2.jpg" mode=""></image>
				<text class="info-pic">001</text>
			</swiper-item>
			<swiper-item class="item">
				<image src="/static/images/3.jpg" mode=""></image>
				<text>002</text>
			</swiper-item>
			<swiper-item class="item">
				<image src="/static/images/4.jpg" mode=""></image>
				<text>003</text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>

</script>

<style lang="scss">
	.swiper{
		border: 1px solid red;
		.item{
			width: 750rpx;
			.info-pic{
				display: inline-block;
				margin-top: 10rpx;
			}
		}
	}
	
</style>

下面看看实际的运行情况如何。

---

如图，效果是可以正常轮播显示的。我们开启了一些参数。

---

我们开启了autoplay参数，默认是false的。我们设置为了true.允许它自己自动播放。

同时我们修改了默认的轮播间隔时间为3秒，默认的是5秒（有点慢）；

我们还增加了参数circular:允许用户鼠标自己滑动图片内容（且循环播放衔接的）；