vue3中如何使用swiper

1、安装swiper

注意：vue3中我这安装的是 7.4.1 版本
      vue2中一般使用的是@5版本（5.4.5）

npm install swiper --save
or
yarn add swiper --save
or 
pnpm install swiper --save

2、 配置 swiper

首先对swiper进行引入
import Swiper from 'swiper';
import "swiper/css";


/**
 * 初始化 swiper
 */
const insSwiper = () =>{
 const mySwiper =  new Swiper('.swiper-container' as any, {
    loop: false, // 循环模式选项
    direction:'vertical', // 轮播方向
    mousewheel: true,  // pc时 鼠标模拟 手指操作
    pagination: {
      el: '.swiper-pagination', // 分页器
    },
    on:{
      init: function(){  
        swiperAni.swiperAnimateCache(); //隐藏动画元素
        swiperAni.swiperAnimate(this); //初始化完成开始动画
      },
      slideChangeTransitionStart: function(){
        swiperAni.swiperAnimate(this); //每个slide开始切换时也运行当前slide动画
        //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        // if(this.activeIndex > 0){  //只有在首页时，才播放背景音乐
        //   myAudio.value.pause()
        //   isPlay.value = false
        // }
      }
    },
  } as any);
}

3、使用swiper

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          内容1
      </div>
      <div class="swiper-slide">
          内容2
      </div>
      <div class="swiper-slide">
          内容3
      </div>
    </div>
     <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>

到这一步swiper轮播图就已经可以正常使用了

4、使用swiper的微场景动画

下载 animate.min.css animate.min.js

在组件中引入 animate.min.js 与 animate.min.css

import * as swiperAni from '../assets/js/animate.js' //根据自己的路径进行引入
<style>
@import "@/assets/styles/animate.min.css";
</style>

这样就引入完毕了，按照官网中用法（Swiper使用方法 > swiperAnimate 使用方法 - Swiper中文网），使用即可。