the first time the animation cannot be completed, the next one will be switched. As shown in the following picture, the next one will be switched. For the first time, I would like to use swiper, to ask how to solve this problem
related codes
/ / 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, -sharp17b4fe, -sharp5f45c4); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, -sharp17b4fe, -sharp5f45c4); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, -sharp17b4fe, -sharp5f45c4); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, -sharp17b4fe, -sharp5f45c4); /* */}
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: -sharpccc"></div>
<div class="swiper-slide" style="background-color: -sharpaaa"></div>
<div class="swiper-slide" style="background-color: -sharpbbb"></div>
<div class="swiper-slide" style="background-color: -sharpddd"></div>
<div class="swiper-slide" style="background-color: -sharpeee"></div>
<div class="swiper-slide" style="background-color: -sharpfff"></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; iPP) {
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); //slideslide
}
})