ITPub博客

首页 > 应用开发 > > 对于swiper中的animate的一些问题

对于swiper中的animate的一些问题

作者:cjk 时间:2019-08-12 15:14:27 0 删除 编辑

由于我的代码量有些大,这里我放一段测试代码:

html:
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
<div>
<div>

js:
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})


运行没有问题,但在每次滚动到当前屏时都会重来一遍动画,我想让它只有第一次滚动到当前屏时运行动画,之后除非刷新否则不再出现动画;

还有在最后的div下我想再写点东西,想使它出现滚动条并可以滚动;

参考网站见: 它是使用fullpage插件,我想用swiper达到相同效果,但以上的问题无法解决,希望能有大神能来帮忙解决一下,我已经被困扰好几天了

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4715/viewspace-3159363/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-29

  • 博文量
    181
  • 访问量
    1134