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'); } })
这样就可以了,是不是很简单呢~