轮播工具swiper在vue2的使用

1. swiper官网： https://www.swiper.com.cn/

2. 使用方法：由于旧项目是vue2的项目，只能用swiper5版本或以下的（下最新的版本要vue3项目）

   1. 安装：npm install swiper@5.4.5 --save-dev

   2. JS引用依赖：

      import Swiper from 'swiper'// 注意引入的是Swiper
      import 'swiper/css/swiper.min.css' // 注意这里的引入
      

   3. 页面：

      <div class="swiper-container">
              <div class="swiper-wrapper">
                <div v-for="(list,index) in arrList" :key="index" class="swiper-slide">
                  <!--  每个滑块的内容 -->
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
              <!-- 如果需要导航按钮 -->
              <!-- <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div> -->
        </div>
      .swiper-slide{
          width:auto;/*根据内容调整宽度*/
       }
      

   4. 初始化(放mounted里面)：

      new Swiper('.swiper-container', { // 参数配置：具体可以参考官网的API
            loop: true,
            effect: 'coverflow', // swiper的切换效果，这个是以3d效果切换的
            grabCursor: true, // 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
            centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左
            pagination: { //分页器的类
              el: '.swiper-pagination'
            },
            coverflow: {  // 3d切换的参数设置
              rotate: 30, // 旋转的角度
              stretch: 50, // 拉伸   图片间左右的间距和密集度
              depth: 50, // 深度   切换图片间上下的间距和密集度
              modifier: 3, // 修正值 该值越大前面的效果越明显
              slideShadows: true // 页面阴影效果
            },
            rewind: true,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            slidesPerView: 'auto', //  根据slide的宽度自动调整展示数量。此时需要设置slide的宽度，如下style所示
             on: {// 这个是获取当前的滑块的索引 
                  slideChange: function() {
                  //  that.active = this.activeIndex
                  }
                }
          })
      

   5. 使用到的其他的方法：

      //指定滑动到指定的滑块,官网都有
      const mySwiper = new Swiper('.swiper-container-past', {参数}
      setIndex(index) {
            this.mySwiper.slideTo(index, 1000, false) // 切换到第一个slide，速度为1秒
          }