详解swiper轮播图的各种坑以及调用ajax实现轮播效果
Swiper常用于移动端网站的内容触摸滑动，对于前端开发人员来说使用swiper可以提高工作效率，不再需要写太多的代码，轻轻松松的实现想要的效果，工作中最常用的就是轮播图了，下面我来说说如何写一个简单的轮播图：
1、首先需要下载一个swiper.css文件和一个swiper.js文件，到时候直接在页面中引入就行了（https://www.swiper.com.cn/ 在swiper官网去下载）。
2、下面我写一个简单的案例：
这样的话就可以实现一个简单的轮播图了，注意：必须要用.swiper-container包裹住.swiper-wrapper 在swiper-slide中写上你想放置的内容，图片也行。js中初始化一个new Swiper();这个对象中可以放autoplay、loop等参数。具体的根据你得需求添加。
3、我重点讲一下swiper轮播图中遇到的几个坑：
（1）、如何自定义分页器的样式：
paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置，写在new Swiper()中。
如图这是我自定义的一个分页器
具体代码如下：
html代码：
//这个里面放置你得分页器。
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 += '';
} else {
customPaginationHtml += '';
}
}
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代码：
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 = " 
";
$('.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 += '';
} else {
customPaginationHtml += '';
}
}
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 += '';
} else {
customPaginationHtml += '';
}
}
return customPaginationHtml;
}
});
}
}
});