使用swiper插件在vue项目中完成无缝滚动以及轮播图

轮播图在一般项目中很常见，很多常用element-ui组件库中也有轮播图，可以不再单独使用swiper，但是当有的ui组件不能完成你的需求后，则可以使用swiper完成。

1，首先安装swiper

yarn add  swiper

2，引入

import Swiper from "swiper";
import "swiper/css/swiper.min.css";

3、代码块(布局代码块)

  <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide slide_item" v-for="(item,i) in image" :key="i">
          <img
            @click="$router.push({ path: `/business_detail/${item._id}` })"
            :src="item.src"
            alt
            :onerror="defaultImg"
          />
        </div>
      </div>
    </div>

　　css-----------如果你可以保证轮播图尺寸一致的话，可以不用限制图片高度，反之，图片尺寸不同的话，你可以通过媒体查询为每个尺寸的轮播图定一下高度

.slide_item img {
  width: 100%;
  object-fit: cover;
}

　　媒体查询如下：可根据需要添加

@media (min-width: 400px) and (max-width: 768px) {
  .slide_item {
    img {
      height: 200px;
    }
  }
}

　4、数据获取以及轮播图渲染

 businessList().then(res => {
        if (res.code == 0) {
          this.image=res.data--------------------绑定的轮播图数据
        }
        this.$nextTick(() => {
          this.swiper();--------------此处为轮播初始化，我写成了一个方法
        });
      });

5、swiper初始化

swiper() {
      var mySwiper = new Swiper(".swiper-container", {
        autoplay: true,
        autoplay: {
          disableOnInteraction: false
        },
        speed: 800,
        loop: true,
        autoplayDisableOnInteraction: false,
        observer: true,----------------当获取图片时，轮播图不会循环轮播，原因是初始化的时候，还没有数据，数据拿到了，又初始化过了，因此加上粉色的这两个对象可以解决这个问题。
        observeParents: true,
        paginationClickable: true
      });
    }

6、无缝滚动

 swiper() {
      var mySwiper = new Swiper(".swiper-container1", {
        initialSlide: 0,
        autoplay: true,
        loop: true,
        speed: 1000,
        slidesPerView: 5,----------你想有几个图片同时展示在页面上就写几，每次平滑过渡一张图片
        spaceBetween: 0,
        observer: true,----------原因同上
        observeParents: true,
        paginationClickable: true,
        autoplay: {
          disableOnInteraction: false
        }
      });
    }