customizing the paging of the current page is a dynamic circle animation. When the animation time is the same as the rotation time, only the first animation loaded at the beginning is the same as the residence time of the current page. After the animation is completed, the transition time is more than one second. The animation will restart for 1 second, like the picture below, and then switch to the next
.
if you want to ask if there is any way to end the animation, switch to the next
`var mySwiper = new Swiper (".swiper-container", {
effect : "fade",
loop:true,
paginationClickable: true, //
autoplay: 4000,
speed: 1000,
pagination: ".swiper-pagination",
autoplayDisableOnInteraction : false, //
paginationType: "custom",//custom,
//
paginationCustomRender: function(swiper, current, total) {
var customPaginationHtml = "";
for(var i = 0; i < total; iPP) {
//
if(i == (current - 1)){
customPaginationHtml += "<span class="banner-active swiper-pagination-customs-active"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M 8 1 a 7 7 0 0 1 0 14 a 7 7 0 0 1 0 -14 Z" fill="none" stroke="-sharp807c7c" stroke-width="2" stroke-linecap="round" stroke-dasharray="43.98847961425781"><animate attributeName="stroke-dashoffset" dur="4s" from="43.98847961425781" to="0" repeatCount="indefinite" /></path></svg></span>";
}
else {
customPaginationHtml += "<span class="swiper-pagination-customs"></span>";
}
}
return customPaginationHtml;
},
`