轮播分页器数字类型，当前页和总页数小于9时前面添加0

在写Swiper项目的时候难免会遇到这样的问题

要求：将底部分页器改为数字类型，页面小于10页时前面添加0比如“01，02，03。。。”

在这里我们可以使用swiper里面自定义的分页器类型来解决，废话不说上代码。

<div class="swiper-container">
    <div class="swiper-wrapper">
		<div class="swiper-slide blue-slide">1</div>
		<div class="swiper-slide red-slide">2</div>
		<div class="swiper-slide orange-slide">3</div>
	</div>
	<!-- 分页器 -->
	<div class="swiper-pagination">
		<span class="dangqian"></span>
		<span>/</span>
		<span class="zongshu"></span>
	</div>
  </div>

注意，这里的分页器一定要写，里面包的一些span标签是为了完成不同的需求而自己定义的，（比如改变一下当前字体颜色啊什么的）如果有什么更好的方法可以直接评论给我，感谢各位大佬。

接下来是js

<script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var mySwiper = new Swiper('.swiper-container',{
	  pagination: {
		el: ".swiper-pagination",
		//自定义分页器样式
		type:"custom",
		renderCustom: function (swiper, current, total) {
				 var dangqian = document.querySelector(".dangqian")
				 var zongshu = document.querySelector(".zongshu")
				 if(current<=9){
					 current = "0"+current
				 }else{
					 current = current
				 }
				 if(total<=9){
					 total = "0"+total
				 }else{
					total = total
				 }
				 dangqian.innerText = current
				 zongshu.innerText = total
			}
    },
  });
  </script>

到这里基本上就算是完成了至于样式什么的我也考虑到了，可能有些人喜欢搬砖，我也给大家放一下。

* {
	margin: 0;
	padding: 0;
	}
	.blue-slide {
		background: #4390EE;
	}
	.red-slide {
		background: #CA4040;
	}
	.orange-slide {
		background: #FF8604;
	}
	.swiper-slide {
		line-height: 300px;
		color: #fff;
		font-size: 36px;
		text-align: center;
	}
	.dangqian{
		color: aquamarine;
	}