swiper的使用之一:自定义分页器pagiantion

Posted 骇客公社

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper的使用之一:自定义分页器pagiantion相关的知识,希望对你有一定的参考价值。

今天项目用到swiper的自定义分页器,由于官网写的比较简单,而在网上看到也多数是以前版本的实例。经过多篇博客的参考,最后终于写出来了。

使用版本

我使用的是3版本以上,而发现以前的版本和新版API上面有些差别,所以这儿就主要以3+版本为参考。

使用的API

做自定义分页器的时候,我们需要使用pagination的type和renderCustom这两个参数。

panigation: {
    type: ‘custom‘,
    renderCustom: function(swiper, current,total){}

}

 

技术分析

在做自定义分页器的时候,swiper会自动帮我们在定义分页器时的元素“.swiper-pagination”加上".swiper-pagination-custom",如果前面已经在.swiper-pagination上面加了样式,就不需要在写样式了,没有就需要给"swiper-pagination-custom"定义样式(我做的时候没有加样式)

再定义两个类".swiper-pagination-customs"和".swiper-pagination-customs-active",用来自定义需要的分页器样式(.swiper-pagination-customs自定义,但是另一个必须是active用来定义选中时的样式)

在renderCustom中循环轮播的页面,将新的分页器添加进去

let appSwiper = new Swiper(‘.swiper-comtainer‘,function(){
   pagination:{
      el: ‘.swiper-pagination‘,
      // 自定义分页器,必须的type类型
      type: ‘custom‘,
      renderCustom: function(swiper,current, total){
        var paginationhtml = "";
        for(var i= 0; i< total; i++) {
         // 判断是不是激活焦点,是的话添加active类,不是就只添加基本样式类
           if(i === (current -1)){
              paginationHtml = ‘<span class="swiper-pagination-customs swiper-pagination-customs-activ"></span>‘;
            }
              paginationHtml = ‘<span class="swiper-pagination-customs"></span>‘;
         }
        return paginationHtml;
     }
  } 

})

 到这儿就完成了自定义分页器样式的整个过程了,快去试试吧。

以上是关于swiper的使用之一:自定义分页器pagiantion的主要内容,如果未能解决你的问题,请参考以下文章

2022-02-20 Vue中使用swiper,上下翻页和分页器自定义

Swiper插件分页器使用

vue中使用Swiper插件怎么修改他的分页器样式

Swiper分页器pagination多页面使用失效问题解决

一个swiper 两个分页器的写法总结

Sweiper在react中的使用(解决分页器不显示问题)