vue-awsome-swiper垂直方向的匀速轮播

引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

注册

components: {
    swiper,
    swiperSlide
  },

dom 结构
这里需要注意几点，当数据caseInfoList是从接口获得的动态数据时候一定记得加上v-if="caseInfoList.length > 1"c才不会导致bug

<div class="card-img-box">
            <swiper
            ref="workReview"
            :options="swiperOptionsRight"
            class="work-review-swiper"
            v-if="caseInfoList.length > 1"
          >
            <swiper-slide
              v-for="(item, index) in caseInfoList"
              :class="`slide-${index + 1}`"
              :key="index"
              class="swper-slide"
            >
              //这里是你的要轮播的自定义内容
            </swiper-slide>
            </swiper>
        </div>

swiperOptionsRight 配置项

swiperOptionsRight: {
        spaceBetween: 5,//设置slid swiper间的间距
        direction: 'vertical',//设置轮播方向
        slidesPerView: 2, //可视个数
        loop: true, //设置循环
        initialSlide:1,//暂时没发现有什么作用
        loopAdditionalSlides: 3, //必须设置可视slide有3个，loopedSlides可设为5个或以上
        grabCursor: true,

        //设置匀速
        speed: 3000,//轮播动画的时间，值越大，速度越慢
        freeMode: true,//想要匀速运动的时候最好设置上
        autoplay: {//自动轮播
          delay: 10,//自动切换的时间间隔，10ms切换一次，几乎不停留
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        observeSlideChildren: true,
      },

这些做完了还不能保证匀速运动，需要设置全局样式

.swiper-container-free-mode > .swiper-wrapper{
    transition-timing-function:linear!important;//swiper 匀速运动
}

//下面是我想要的效果图

做完上面的事情后，发现有bug ,就是轮播到最后一个的时候向第一个切换的时候会跳动一下，找了很久的问题，仔细的研究了是不是配置项的问题，发现配置没有问题，后面考虑到是不是尺寸的问题，因为我做的是大屏项目，用的是rem 单位，swiper 自己的单位是px ，现在至少方向是对的，不停的改尺寸还是没有解决，页面中可视区的两个slide明显比轮播的窗口要高一些，不知道为什么，swiper 自己初始化的高度不对，并且横向轮播的时候是没有问题的，于是我尝试设置一下每个slide的高度，让两个silde 的高度和上面粉色框的高度差不多，果然解决了跳动的bug

.card-img-box {
        margin-top: 60px;
        height: calc(100% - 1030px - 120px);
        .work-review-swiper{
          height: 100%;
        }
        .swiper-container{
          height: 100%;
        }
        .swper-slide {
            border: 6px solid rgba(0, 150, 157, 0.5);
            border-radius: 20px;
            padding: 40px;
            display: flex;
            font-size: 60px;
            color: #fff;
            background-color: rgba(0, 150, 157, 0.2);
            height: 500px!important;
            
             
          }
        }
      }

小小功能，却有这么多需要注意的地方，做码农不容易呀，总算是大功告成