swiper圆形进度条分页器

利用两个圆，通过旋转隐藏的方式来达到效果。如下：

先写个轮播图

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="./themes/simple/img/banner.jpg" alt="banner" title="banner" class="max-img">
		</div>
		<div class="swiper-slide">
			<img src="./themes/simple/img/banner.jpg" alt="banner" title="banner" class="max-img">
		</div>
		<div class="swiper-slide">
			<img src="./themes/simple/img/banner.jpg" alt="banner" title="banner" class="max-img">
		</div>
	</div>
	<!-- 分页器 -->
	<div class="swiper-buttons">
		<div class="back">
			<div class="circle circle-left absolute">
				<div class="inner inner-left"></div>
			</div>
			<div class="circle circle-right absolute">
				<div class="inner inner-right"></div>
			</div>
		</div>
		<div class="swiper-num absolute-center flex">
			<span class="index">01</span>-
			<span class="total">02</span>
		</div>
	</div>
</div>

js代码：

var mySwiper = new Swiper('.swiper-container', {
	autoplay: {
		delay: 4500,
		stopOnLastSlide: false,
		disableOnInteraction: false,
	},
	on: {
		init: function() {
			var total = this.slides.length;
			$('.swiper-num .total').text('0' + total);
			var rotate = 360 / total - 45;
			$('.swiper-buttons .inner-right').css('transform','rotate(' + rotate + 'deg)');
		},
		transitionEnd: function() {
			var index = this.realIndex + 1;
			$('.swiper-num .index').text('0' + index);
			var rotate = 360 / this.slides.length;
			if(rotate*index > 180) {
				var currentRotate = rotate*index - 180 - 45;
				$('.swiper-buttons .inner-right').css('transform','rotate(135deg)');
				setTimeout(() => {
					$('.swiper-buttons .inner-left').css('transform','rotate(' + currentRotate + 'deg)');
				}, 200);
				
			}
			else {
				setTimeout(() => {    // 此处为了过渡圆滑一点
					$('.swiper-buttons .inner-right').css('transform','rotate(' + (rotate*index-45) + 'deg)');
				}, 200);
				$('.swiper-buttons .inner-left').css('transform','rotate(-45deg)');
			}
		}
	}
})

以下为less代码：

.swiper-buttons {
   position: absolute;
   left: 50%;
   bottom: 32%;
   transform: translateX(-50%);
   z-index: 2;
   text-align: center;
   color: rgba(0,113,182,.35);
   .back {
       position: relative;
       width: 105px;
       height: 105px;
       border: 2px solid rgba(0,113,182,.2);
       border-radius: 50%;
       .circle {
           top: -2px;
           width: 53px;
           height: 106px;
           overflow: hidden;
           .inner {
               width: 106px;
               height: 106px;
               border: 2px solid transparent;
               border-radius: 50%;
               border-bottom-color: @website-color;    // 自定义颜色
               border-right-color: @website-color;
               transform: rotate(-45deg);
               transition: all .2s;
           }
       }
       .circle-right {
           left: -2px;
           transform: rotate(180deg);
           transform-origin: 100% 50%;
       }
   }
   .swiper-num {
       font-size: 18px;
       span {
           margin-left: 8px;
       }
       .index {
           margin-left: 0;
           margin-right: 8px;
           color: @website-color;
       }
   }
}

个别类的功能不做赘述。