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

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

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

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

 
   
    
    
      slider1 
     
    
      slider2 
     
    
      slider3

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

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

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

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

详解swiper轮播图的各种坑以及调用ajax实现轮播效果如图这是我自定义的一个分页器

具体代码如下：

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的完整代码写一下，大家可以参考：

效果图：

详解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; } }); } } });