swiper自定义分页器

Question

自定义当前页的分页是一个动态画圆动画 设置动画时间和轮播时间一样4s时 只有最开始加载的第一个动画和当前页停留时间一样 之后的动画都是完成动画多余一秒的过渡时间 导致动画会重新开始1s 像下图会多一秒动画再切换下一张
想问有什么方法可以动画结束就切换下一张

`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; i++) {
      //判断哪个分页器此刻应该被激活
      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="#807c7c" 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;
  },
  `

Answer 1

你描述在清晰点...
按我现在理解是第二页 轮播过渡5s 动画执行了1次多一秒 是这个意思? 代码贴出来

Answer 2

有没有大神能解决

Answer 3

想问下，刚渲染出来的时候，分页器第一个那个动画效果有吗？