vue2中Swiper@4使用swiper-animate

在Vue 2中使用Swiper v4版本并添加动画效果，你需要安装Swiper库以及 swiper-animate 插件。首先，确保通过npm或yarn安装基础Swiper包：

npm install swiper@4
# 或者
yarn add swiper@4

然后，安装swiper-animate插件：

npm install swiper-animate
# 或者
yarn add swiper-animate

接下来，在项目里引入 Swiper 和 swiper-animate，并在组件中配置Swiper实例，设置animate选项开启动画：

import { Swiper, SwiperSlide } from 'swiper';
import 'swiper/animate';

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        // 其他常规配置...
        animate: true, // 开启动画
        // 如果需要特定滑动动画，可以使用 swiperAnimateOptions 代替 animate
        // swiperAnimateOptions: {
        //   duration: 500, // 动画持续时间，单位ms
        //   easing: 'easeInOutQuart', // 动画缓动函数
        // },
      }
    };
  },
  mounted() {
    this.swiper = new Swiper('.swiper-container', this.swiperOptions);
  },
  beforeDestroy() {
    this.swiper.destroy(); // 销毁Swiper实例时关闭动画
  }
};

在HTML模板中创建Swiper容器：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 滑块内容 -->
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <!-- 更多滑块... -->
  </div>
</div>

现在，Swiper会应用默认的滑动动画效果。你可以根据需要调整`animate`选项或其他动画相关配置来自定义动画。如果你有特殊的需求，如自定义动画路径，可能需要结合 swiper-animate 的 API 来编写。