swiper轮播完成后执行动画
原理很简单，是就让需要执行动画的对象，隐藏在显示就会触发动画了
前提是需要引入animate.min.css
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
<div id="banner">
<div class="swiper-wrapper">
{volist name="$_G['page']['banner']" id="data"}
<div class="swiper-slide">
<img class="img wow fadeIn" src="{$data.0}" alt="" >
<div class="text">
<div class="cbox ani container-fluid">{$data.1|raw}</div>
</div>
</div>
{/volist}
</div>
{if condition="count($_G['page']['banner'])>1"}
<div class="banner-pagination-center">
<div class="container-fluid"><div class="banner-pagination"></div></div>
</div>
{/if}
</div>//原理，就是先上动画元素隐藏在展示
new Swiper('#banner',{
pagination:'.banner-pagination',
paginationClickable:true,
autoplay:4500,
autoHeight: true,
onInit:function(swiper){
$('#banner .swiper-slide').eq(swiper.activeIndex).find('.ani').addClass('animated fadeInUp');
},
onSlideChangeStart:function(swiper){
$('#banner .swiper-slide').eq(swiper.activeIndex).find('.ani').hide();
},
onSlideChangeEnd: function(swiper){
$('#banner .swiper-slide').eq(swiper.activeIndex).find('.ani').show().addClass('animated fadeInUp');
}
}) 这样就可以了，是不是很简单呢~