使用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
        }
      });
    }