vue2使用swiper的3D滚动切换，写一个实例

以下是一个基于vue2和swiper的3D滚动切换的示例：

1. 安装swiper：

npm install swiper --save

2. 在vue组件中引用swiper，并初始化swiper：

<template>
  <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  mounted() {
    new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    })
  }
}
</script>

<style>
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}
</style>

3. 在父组件中使用该swiper组件：

<template>
  <div>
    <swiper-demo></swiper-demo>
  </div>
</template>

<script>
import SwiperDemo from './SwiperDemo.vue';

export default {
  components: {
    SwiperDemo
  }
}
</script>

运行该示例后，会显示一个3D滚动切换的swiper组件，可以通过拖动或点击切换到不同的slide。