swiper插件分页动画

Question

动画第一次无法完成就会切换下一个，如下图所示位置就切换下一张了，第一次用swiper，想问问这种问题怎么解决

相关代码

//css

.ani {
animation:pagelength 5s linear;
-moz-animation:pagelength 5s linear; /* Firefox */
-webkit-animation:pagelength 5s linear; /* Safari and Chrome */
-o-animation:pagelength 5s linear; /* Opera */
height: 5px;
position: absolute;
left: 0;
top: 0;
background: -webkit-linear-gradient(left, #17b4fe, #5f45c4); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #17b4fe, #5f45c4); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #17b4fe, #5f45c4); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #17b4fe, #5f45c4); /* 标准的语法（必须放在最后） */

}
html

<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<link rel="stylesheet" href="css/swiper.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<script src="js/swiper.js"></script>


<div id="banner">
    <div class="swiper-container swiper-no-swiping" >
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #ccc"></div>
            <div class="swiper-slide" style="background-color: #aaa"></div>
            <div class="swiper-slide" style="background-color: #bbb"></div>
            <div class="swiper-slide" style="background-color: #ddd"></div>
            <div class="swiper-slide" style="background-color: #eee"></div>
            <div class="swiper-slide" style="background-color: #fff"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>

js

var mySwiper = new Swiper ('.swiper-container', {
  autoplay: 4000, 
  speed:  1000,
  loop:true,
  paginationClickable: true,
  pagination: '.swiper-pagination',
  paginationType: 'custom',
  paginationCustomRender: function(swiper, current, total) {
    var customPaginationHtml = "";
    for(var i = 0; i < total; i++) {
      if(i == (current - 1)){
          customPaginationHtml += '<span class="swiper-pagination-customs-active"><span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="5s" swiper-animate-delay="0s"></span></span>';
      } 
      else {
        customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
      }
    }
    return customPaginationHtml;
  },
  onInit: function(swiper){ 
    swiperAnimateCache(swiper); //隐藏动画元素
    swiperAnimate(swiper); //初始化完成开始动画
  },
  onSlideChangeEnd: function(swiper){
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  }
})  

Answer 1

时间不对应
cssanimation设置的是5s
swiper autoplay设置的是4s

Answer 2

这个问题我几天前刚帮别人解决过...
autoplay是4000
speed是1000
第二页应该是正常的?对吧
第一个应该设置5000 应该current为1也就是第二页的时候第二页时候设置为autoplay为4000