vue中使用swiper做无缝滚动(走马灯)效果

<swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in lists.appResource" :key="index">
        <img :src="upload + item.info" alt="" />
        <header v-if="item.title">{{ item.title ? item.title : "" }}</header>
        <p v-if="isShow && item.description">{{ item.description ? item.description : "" }}</p>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

swiperOptions: {
          slidesPerView: "auto",
          spaceBetween: 40,
          loop: true,
          speed: 4000,
          autoplay: {
            delay: 1, //自动切换的时间间隔
            disableOnInteraction: false,
            pauseOnMouseEnter: true, //鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
    },
computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },


这里发现使用css无效，后改用在mounted中修改

.swiper-container .swiper-wrapper{
  -webkit-transition-timing-function: linear !important; /*之前是ease-out*/
  -moz-transition-timing-function: linear !important;
  -ms-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

mounted() {
    let this_swiper = this.$refs.mySwiper.$swiper
    this_swiper.$wrapperEl[0].style['transition-timing-function'] = 'linear'
  },

 以上代码中设置 speed: 4000, transition-timing-function：linear 。还有一个想实现的功能就是鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换，pauseOnMouseEnter: true。这时候发现，鼠标移入swiper后没有立即停止，而是延迟后才停止。原因是：鼠标移入后要等当前的swiper移动完后才停止，swiper的移动是靠控制transform的参数来实现的。

//6.6.2之前的版本需要通过代码实现此功能

this_swiper.el.onmouseover = function(){　

　　this_swiper.autoplay.stop()

}

this_swiper.el.onmouseout = function(){

　　this_swiper.autoplay.start();

}

transform  2D 的集合 matrix 。

matrix( 1 , 0 , 0 , 1 , 0 , 0 ) 的参数6位数

1. 默认值为1，定义的是 scaleX 通过设置 X 轴的值来定义缩放。值：>=0
2. 默认值为0，定义的是 skew 定义 2D 倾斜
3. 默认值为0，定义的是 rotate 定义2D 旋转角度
4. 默认值为1，定义的是 scaleY 通过设置 Y 轴的值来定义缩放。值：>=0
5. 默认值为0，定义的是 translateX 通过设置 X 轴的值来定义左右位移。
6. 默认值为0，定义的是 translateY 通过设置 Y 轴的值来定义上下位移。