欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

swiper,animate使用方法

程序员文章站 2024-03-25 12:25:52
...

1、先链接css和js文件

<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
        
<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script> 

2、初始化

/* 初始化swiper.js */
var mySwiper = new Swiper(‘.swiper-container‘,{
        pagination : ‘.swiper-pagination‘, //分页器
        direction:‘vertical‘, //垂直方向换页
        slideToClickedSlide: true, //slide1向slide2 swipe的过程中轻点slide1会回到slide1
        
        /* 初始化animate */
        onInit: function(swiper){  //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper);  //隐藏动画元素 
            setTimeout(function(){ //2s后开始运行动画(移动端总是没加载完图片就开始动画了。。。。。)
                swiperAnimate(swiper); //初始化完成开始动画
            },2000)
        }, 
        onSlideChangeEnd: function(swiper){ 
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        } 
})

4、使用animate的动画,注意class中要加“ani”

<img class="ani pic" src="pic.jpg"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s" />

  自定义的动画效果:

  html中添加class=“ani” 和swiper-animate-effect=“动画名”,可以与animate自带的动画一样,在每次切换时运行动画。

<img class="ani pic" src="pic.jpg"  swiper-animate-effect="shutter2" />

  css中定义效果

@-webkit-keyframes shutter2{
    from{top: 100%;}
    to{top: 0;}
}
.shutter2{
    -webkit-animation: shutter2 0.5s forwards;
    animation: shutter2 0.5s forwards;
}

API地址:https://www.swiper.com.cn/usage/animate/

官网最下方可以看动画效果

方法二:

动画只引用 animate.min.css

样式里面要加

.swiper-slide-active .animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.swiper-slide-active .m-bounceInLeft {

-webkit-animation-name: bounceInLeft;

animation-name: bounceInLeft;

}

<div class="animate m-bounceInLeft"></div>

重新命一下名避免跟animate.min.css里面的样式冲突,但是可直接引用里面的动画