无间隙循环轮播效果

一.效果

二.下载依赖

cnpm install swiper@5.4.5 --save
cnpm install vue-awesome-swiper@4.1.1 --save

三.使用

1.先在main.js 里引入 swiper依赖的css

import 'swiper/dist/css/swiper.css';

2.在组件里引用 seiper

import { Swiper, SwiperSlide } from "vue-awesome-swiper";

 <swiper  ref="mySwiper" :options="swiperOption"  class="swiper-content swiper-container" >
    <swiper-Slide class="swiper-slide" v-for="(item, index) in swiperList"  :key="index" >
       <div class="img"><img :src="item.pic" alt="" /></div>
     </swiper-Slide>
  </swiper>

3.配置swiper属性

swiperOption: {
  loop: true, // 自动播放
    autoplay: {
     delay: 0,
     disableOnInteraction: false,
     },
     speed: 3000, // 播放速度
     direction: "horizontal", //默认horizontal, 水平轮播
     slidesPerView: "auto", //默认1, 同时显示的slides数量,auto 代表根据轮播图的宽度排列
     spaceBetween: 62, //轮播图之间的间距
     // freeMode: false,
     freeModeMomentum: false,
     observer: true, // 修改swiper自己或子元素时，自动初始化swiper
     observeParents: true, // 修改swiper的父元素时，自动初始化swiper
 },

四.把滚动动画设置成 匀速

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