详解swiper轮播图的各种坑以及调用ajax实现轮播效果

Swiper常用于移动端网站的内容触摸滑动，对于前端开发人员来说使用swiper可以提高工作效率，不再需要写太多的代码，轻轻松松的实现想要的效果，工作中最常用的就是轮播图了，下面我来说说如何写一个简单的轮播图：

1、首先需要下载一个swiper.css文件和一个swiper.js文件，到时候直接在页面中引入就行了（https://www.swiper.com.cn/ 在swiper官网去下载）。

2、下面我写一个简单的案例：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container', {
	autoplay: 5000,//可选选项，自动滑动
})
</script>

这样的话就可以实现一个简单的轮播图了，注意：必须要用.swiper-container包裹住.swiper-wrapper 在swiper-slide中写上你想放置的内容，图片也行。js中初始化一个new Swiper();这个对象中可以放autoplay、loop等参数。具体的根据你得需求添加。

3、我重点讲一下swiper轮播图中遇到的几个坑：

（1）、如何自定义分页器的样式：

    paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置，写在new Swiper()中。

如图这是我自定义的一个分页器

具体代码如下：

html代码：

<div class="swiper-pagination "></div>//这个里面放置你得分页器。

<div class="swiper-container" id="001">
	<div class="swiper-wrapper"></div>
	<div class="swiper-pagination "></div>
</div>

js代码：

var mySwiper = new Swiper('.swiper-container', {
					autoplay: 5000, //可选选项，自动滑动
					loop: true,
					pagination: '.swiper-pagination',
					autoplayDisableOnInteraction : false,//手动滑动后可以自动滑动
					paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置
					paginationCustomRender: function(swiper, current, total) {
						var customPaginationHtml = "";
						for(var i = 0; i < total; i++) {
							//判断哪个分页器此刻应该被激活  
							if(i == (current - 1)) {
								customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
							} else {
								customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
							}
						}
						return customPaginationHtml;
					}
				});

css代码：（看我的注释）

/*包裹自定义分页器的div的位置等CSS样式*/
.swiper-pagination-custom {
	bottom: 10px;
	left: 0;
	width: 100%;
}
/*自定义分页器的样式*/
.swiper-pagination-customs {
	width: 12px;
	height: 2px;
	display: inline-block;
	background: #000;
	opacity: .3;
	margin: 0 5px;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
	opacity: 1;
	background-color: #e63737;
}

这样就完成了一个自定义分页器。

（2）解决swiper轮播图手动滑动之后就不自动滑动的问题：

原因在于swiper轮播图默认在手动滑动之后就关闭自动滑动，即autoplay参数关闭了，这个时候轮播图就显得不那么完美了，还好swiper中给我们提供了这个参数   autoplayDisableOnInteraction 说明：当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。所以我们需要加上：

autoplayDisableOnInteraction : false,//手动滑动后可以自动滑动，这样就完美了。

（3）设置轮播图播放的时间：

  autoplay: 5000,//每个轮播图的播放时间为5秒

4、下面我把swiper调用ajax的完整代码写一下，大家可以参考：

效果图：

html代码：

<!------------轮播图------------->
		<div class="swiper-container" id="001">
			<div class="swiper-wrapper"></div>
			<div class="swiper-pagination "></div>
		</div>

css代码：

/*-----------轮播图-------------*/

.swiper-container {
	clear: both;
	width: 100%;
	/*height: 370px;*/
	min-height: 100px;
	position: relative;
	top: 0;
}

.swiper-slide {
	/*margin-top: 67px;*/
}

.swiper-slide img {
	width: 100%;
	/*margin-top: 67px;*/
}
/*包裹自定义分页器的div的位置等CSS样式*/
.swiper-pagination-custom {
	bottom: 10px;
	left: 0;
	width: 100%;
}
/*自定义分页器的样式*/
.swiper-pagination-customs {
	width: 12px;
	height: 2px;
	display: inline-block;
	background: #000;
	opacity: .3;
	margin: 0 5px;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
	opacity: 1;
	background-color: #e63737;
}

js代码：

//----------------banner图轮播-------------
	$.ajax({
		type: "post",
		dataType: 'json',
		url:这里写接口地址
		data: {
			"ss": getCookie('openid')
		},
		success: function(data) {
			console.log(data)
			if(data.code == 1) { //请求成功
				var con = data.result.banner; //
				var len = con.length;
				console.log(len + "我是轮播图的数量");
				var sort = con.sort; //排序
				//---------------循环图片（轮播图）-----
				$.each(con, function(k, v) {
					var src = con[k].img_url; //图片地址
					var imgId = con[k].id; //图片id
					var sort = con[k].sort; //排序
					var imgurl = con[k].url; //商品id
					console.log(imgurl);
					var t = "<div class='swiper-slide'><a href='javascript:void(0)' imgId=" + imgId + " onclick='goDetails(" + imgId + "," + imgurl + ")'  imgurl=" + imgurl + " > <img src=" + src + "  imgurl=" + imgurl + "  /></a></div>";
					$('.swiper-wrapper').append(t)

				});
			};
			if(len <= 1) {
				console.log("不能滑动");
				//swiper插件实现轮播图
				var mySwiper = new Swiper('.swiper-container', {
					//autoplay: false, //可选选项，自动滑动
					loop: false,
					pagination: '.swiper-pagination',
					paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置
					paginationCustomRender: function(swiper, current, total) {
						var customPaginationHtml = "";
						for(var i = 0; i < total; i++) {
							//判断哪个分页器此刻应该被激活  
							if(i == (current - 1)) {
								customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
							} else {
								customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
							}
						}
						return customPaginationHtml;
					}
				});
			} else {
				console.log("可以滑动");
				//swiper插件实现轮播图
				var mySwiper = new Swiper('.swiper-container', {
					autoplay: 5000, //可选选项，自动滑动
					loop: true,
					pagination: '.swiper-pagination',
					autoplayDisableOnInteraction : false,//手动滑动后可以自动滑动
					paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置
					paginationCustomRender: function(swiper, current, total) {
						var customPaginationHtml = "";
						for(var i = 0; i < total; i++) {
							//判断哪个分页器此刻应该被激活  
							if(i == (current - 1)) {
								customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
							} else {
								customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
							}
						}
						return customPaginationHtml;
					}
				});
			}
		}
	});