swiper自定义分页器使用方法详解

2019-11-19 14:37:56

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了swiper自定义分页器使用的具体代码，供大家参考，具体内容如下

解决问题：不想使用swiper的自带的圆钮式的分页器，想使用自定义的分页器。

解决方案：利用swiper提供的paginationCustomRender()方法（自定义特殊类型分页器，当分页器类型设置为自定义时可用。）
下面的代码可以直接赋值粘贴到html文件里面然后作为项目在浏览器打开，但是图片需要你引用自己的本地图片并设置好路径，否则你是看不到轮播图片的。代码如下（参考注释很重要）：

<!DOCTYPE html> <html>   <head>  <meta charset="UTF-8">  <title>swiper自定义分页器用法</title>  <link href="swiper-3.4.2.min.css" rel="stylesheet" />  <style>   * {   padding: 0;   margin: 0;   }     .swiper-container {   position: relative;   width: 100%;   height: 100%;   }     .swiper-slide {   text-align: center;   font-size: 18px;   background: #fff;   display: -webkit-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;   -webkit-box-pack: center;   -ms-flex-pack: center;   -webkit-justify-content: center;   justify-content: center;   -webkit-box-align: center;   -ms-flex-align: center;   -webkit-align-items: center;   align-items: center;   }     .swiper-slide img {   display: block;   width: 100%;   max-width: 100%;   }   /*包裹自定义分页器的div的位置等CSS样式*/   .swiper-pagination-custom {   bottom: 10px;   left: 0;   width: 100%;   }   /*自定义分页器的样式，这个你自己想要什么样子自己写*/   .swiper-pagination-customs {   width: 30px;   height: 4px;   display: inline-block;   background: #000;   opacity: .3;   margin: 0 5px;   }   /*自定义分页器激活时的样式表现*/   .swiper-pagination-customs-active {   opacity: 1;   background-color: #F78E00;   }  </style>  </head>   <body>  <div class="swiper-container">   <div class="swiper-wrapper">   <div class="swiper-slide">    <img src="banner1_.jpg" alt="轮播图1" />   </div>   <div class="swiper-slide">    <img src="banner2_.jpg" alt="轮播图2" />   </div>   </div>   <div class="swiper-pagination"></div>  </div>  </body>  <script src="jquery.min.js"></script>  <script type="text/javascript" src="swiper.min.js"></script>  <script>  var mySwiper = new Swiper('.swiper-container', {   direction: 'horizontal',   loop: true,   autoplay: 3000,//自动轮播   speed: 600,   // 如果需要分页器   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;   }  });  </script>  </html>

代码效果图如下（上传图片大小有限制，所以我滑的有点快）：