Swiper3.x 自定义指示器-pagination

目录

一.前言

二.内容与解决方案

js部分：其中绑定事件是基于jquery写的

html静态页面如下

css自定义 一个分页器样式

最后出来的效果

总结

一.前言

很久没有更新博客了，最近一直在写静态页面，这就总是避不开swiper轮播

怎么自定义一个指示器样式呢？如何自定义指示器的绑定点击事件呢？

二.内容与解决方案

js部分：其中绑定事件是基于jquery写的

var mySwiper3 = new Swiper(".work_swiper", {
    autoplay: {
      stopOnLastSlide: true,
     delay: 3000,
     },
  speed: 1000,
  loop: true,
  pagination: {
    el: ".dot",
    // 自定义分页器，必须的type类型
    type: "custom",
    renderCustom: function (swiper, current, total) {
      var paginationHtml = "";
      for (var i = 1; i <= total; i++) {
        // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
        if (i === current) {
          paginationHtml += `
0${i}
`;
        } else {
          paginationHtml += `
0${i}
`;
        }
      }
      return paginationHtml;
    },
  },
  slidesPerView: 1,
});
//给每个页码绑定跳转的事件
$(".dot").on("click", "div", function () {
  var index = $(this).get(0).innerHTML.slice(1);
  mySwiper3.slideTo(index, 1000, false); //切换到第一个slide，速度为1秒
});

以上是主要的swiper的js部分

html静态页面如下

    

    
                

                    

                        

                           内容1
                           
                        
                    
                    

                        

                             内容2
                        
                    
                    

                        

                          内容三
                        
                    
                
                
                

                

css自定义 一个分页器样式

.dot {
            display: flex;
        }
.dot .dot-customs {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  color: #fff;
  margin-right: 14px;
}
.dot .dot-customs-active {
  background-color: #4558ad;
}

最后出来的效果

 

总结与参考

 

以上就是全部内容，如果有发现什么更好的自定义指示器 欢迎回访

参考内容来自：pagination_swiper3参数选项