关于swiper与animation的总结和现存在的问题

最新推荐文章于 2025-10-05 08:27:34 发布

原创最新推荐文章于 2025-10-05 08:27:34 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Swiper组件创建全屏轮播，并结合Animation实现不同场景下的动画效果，包括竖屏轮播、横屏轮播、横竖屏交叉轮播以及带有两次不同动画的竖屏轮播。同时也提到了在尝试将动画应用于横竖屏都有的轮播时遇到的问题。

swiper是一个很好的全屏轮播的组件，以下为个人总结希望各位大牛光临指正：

1.普通的竖屏全屏轮播：

<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>

<script>内：

var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
})

2.横屏：

var mySwiper = new Swiper ('.swiper-container', {

})

/*这是最简单的全屏轮播。许多属性没写，想写的话可以看api官网*/

3.横竖屏交叉的全屏轮播：

<head>内的引用一致；

<body>内：

<div class="swiper-container swiper-container-h">
    <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 class="swiper-slide " >Slide4</div>
      <div class="swiper-slide">
      <div class="swiper-container swiper-container-v">
        <div class="swiper-wrapper">
         <div class="swiper-slide " >竖向内容一</div>
         <div class="swiper-slide " >竖向内容二</div>
         <div class="swiper-slide" >竖向内容三</div>
         <div class="swiper-slide" >竖向内容四</div>
        </div>
      </div>
      </div>
      <div class="swiper-slide " >Slide 6</div>
      <div class="swiper-slide " >Slide 7</div>
      <div class="swiper-slide " >Slide 8</div>
      <div class="swiper-slide " >Slide 9</div>
      <div class="swiper-slide " >Slide 10</div>
    </div>
    

</div>

<script>内：

var mySwiper = new Swiper ('.swiper-container-v', {
direction: 'vertical',
})
var Swiper = new Swiper ('.swiper-container-h', {

})

4.普通的竖屏轮播加animation动画

<head>内：

<body>内：

<div class="swiper-container ">
    <div class="swiper-wrapper">
      <div class="swiper-slide " ><span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 1</span></div>
      <div class="swiper-slide " ><span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 2</span></div>
      <div class="swiper-slide" ><span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 3</span></div>

</div>

<script>内：

//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动画
// }
//})

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

//横屏与竖屏基本一致，就去掉js中 direction:'vertical',一句就可以。

5.竖屏可以有两次不同动画的

<head>内：

<body>内：

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide " ><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 1</span></div>
      <div class="swiper-slide " ><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 2</span></div>
      <div class="swiper-slide" ><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 3</span></div>
    </div>
</div>

<script>内：

at 后面跟的是动画延迟时间

from 后面跟的是动画样式

use 后面跟的是动画力度

during 后面跟的是动画持续时间

force 后面跟的是是否使用只有在出场动画的时候使用。进场动画无效。。

*没有解决问题：

animation动画不能与横竖屏都有的轮播一起使用：

相关的css与js 链接: https://pan.baidu.com/s/1geUiuQn 密码: wdx2