swiper滑动及动画特效

最新推荐文章于 2022-05-17 18:05:24 发布

嘻嘻迪

最新推荐文章于 2022-05-17 18:05:24 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： swiper 前端

本文链接：https://blog.youkuaiyun.com/m0_37906954/article/details/79577460

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Swiper的使用方法，包括加载插件、HTML结构设置、大小定义和初始化配置。同时，详细讲解了如何结合Swiper Animate实现动画效果，包括在不同阶段启动动画，并给出了CSS3自定义动画的示例。

  Swiper基本使用方法：
 

 1.加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

 2.HTML内容。

<!DOCTYPE html>
<html>
    <head>
        ...
        <link rel="stylesheet" href="path/to/swiper.min.css">
    </head>
    <body>        
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <script src="path/to/swiper.min.js"></script>
    </body>
</html>

 3.你可能想要给Swiper定义一个大小，当然不要也行。

 4.初始化Swiper：最好是挨着</body>标签。

<script>        
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical',
        loop: true,
    
        // 如果需要分页器
        pagination: {
              el: '.swiper-pagination',
        },
    
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
    
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
    })        
</script>

 Swiper Animate使用方法

 1. 使用Swiper Animate需要先加载
 swiper.animate.min.js和
 animate.min.css。

 2. 初始化时隐藏元素并在需要的时刻开始动画。

<script> 
//Swiper4.x
    var mySwiper = new Swiper ('.swiper-container', {
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素 
                swiperAnimate(this); //初始化完成开始动画
            }, 
            slideChangeTransitionEnd: function(){ 
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            } 
        }
    }) 


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

 3. 在需要运动的元素上面增加类名
   ani   ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

<div class="swiper-slide">
    <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>

 CSS3自定义动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}