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

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

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

解决方案：利用swiper提供的paginationCustomRender()方法(自定义特殊类型分页器，当分页器类型设置为自定义时可用。)

下面的代码可以直接赋值粘贴到html文件里面然后作为项目在浏览器打开，但是图片需要你引用自己的本地图片并设置好路径，否则你是看不到轮播图片的。代码如下(参考注释很重要)：

swiper自定义分页器用法

* {

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-f