无缝连接轮播滚动效果

在vue-cli中下载swipernpm install swiper/cnpm install swiper/yarn add swiper
在组件中引入

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

然后实例化

mounted(){
    new Swiper('.swiper-container', {
      slidesPerView: 2,//可视区域展示5个
      spaceBetween: 30,//间隔30px
      speed: 2000,//时速2s
      loop: true,//循环
      autoplay: {//自动轮播
        delay: 0,
        disableOnInteraction: false
      }
    });
  }

最后是的整个动画匀速,在包裹图片的盒子加css样式，要覆盖之前的样式

.swiper-wrapper {
  transition-timing-function:linear!important;
}

案例代码

<template>
  <div class="hello">
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in banner" :key="item.id">{{ item.text }}</div>
        </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'HelloWorld',
  data(){
    return {
      banner: [
        {
          id: 1,
          text: 'Slide 1'
        },
        {
          id: 2,
          text: 'Slide 2'
        },
        {
          id: 3,
          text: 'Slide 3'
        }
      ]
    }
  },
  created(){
  },
  mounted(){
    new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      speed: 2000,
      loop: true,
      autoplay: {
        delay: 0,
        disableOnInteraction: false
      }
    });
  }
}
</script>

<style scoped lang="scss">
.swiper-container{
  width: 100%;
  height: 200px;
}
.swiper-wrapper {
  transition-timing-function:linear!important;
}
</style>