html5移动端轮播滑动效果（swiper实现）

今天开发的项目有个页面需要做一个轮播图效果，我也在网上找了插件，最后通的是swiper插件，和移动端开发比较匹配，官网地址：https://www.swiper.com.cn/，可以在官网查看更多的api和下载插件。

下面介绍一下如何用swiper来实现移动端的轮播图效果。

因为我用的是vue开发的项目，所以我在项目中要先引入了swiper的插件，包括swiper.min.js和swiper.min.css，然后是代码的实现。

引入js和css代码（因为我也用的jquery）：

<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

html代码：

<div class="contentOuter">
	<div class="tabTitle">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,index) in tabLists" @click="changeType(index)">
				    <img :src="item.imgSrc" >
					<p :class="{fontItem:index== i}" >{{item.name}}</p>
				</div>
			</div>
		</div>
	</div>
	<!-- 导航按钮 -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

在代码里面我运用了vue中的v-for指令对轮播的内容进行遍历循环，这样可以减少代码的冗余度，tabLists数组中有两个属性：图片的地址imgSrc和需要展示的文字name,可以根据自己的需要进行设置。

js代码：

var mySwiper = new Swiper ('.swiper-container', {
  slidesPerView:5,
  // 前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    disabledClass: 'my-button-disabled',
  }
})        

下面介绍一些基本的属性：

slidesPerView：需要在一页展示的个数；

navigation：是一个前进后退组件，其中有以下属性，可以在官网详细查看：官网地址

loop：是否循环轮播，默认为false，也就是滑到一个方向就滑不动了，轮播内容不会循环轮播。

speed：滑动到结束的时间，默认300ms；

direction：滑动的方向，默认是水平方向horizontal，可以设置为竖直方向：vertical；

其他的属性就不一一介绍了，详细的可以去官网查看。

就会实现下面这个效果图：

在运用这个轮播图插件的时候，有一个属性要自己设置，就是总共轮播的内容长度，也就是swiper-wrapper标签，要不然会出现滑动空白的情况。

除此之外我们在使用这个插件的时候，正常情况下左右箭头都是在内容中，官网默认的情况，想要把箭头拿出来放到外面，就要在轮播内容外面包裹一个父级div，然后在这个div中写箭头代码，调整剪头即可。又什么问题欢迎提问，看到就会及时解答！