背景

為啥要耽誤說下載的版本號來，因為swiper在6.x的版本使用實在很頭疼，所有下載的時候指定下載版本為5.x的

下載命令 ：

mpn install [email protected] --save

在main.js中引入：

//swiper引入js、css
import 'swiper/js/swiper.min'
import 'swiper/css/swiper.min.css'

在.vue頁面中使用：

<template>
    <div class="box">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" >
              <img :src="require('../../assets/img/Ctom1.jpg')"/>
            </div>
            <div class="swiper-slide" >
              <img :src="require('../../assets/img/Ctom2.jpg')"/>
            </div>
            <div class="swiper-slide" >
              <img :src="require('../../assets/img/error404.png')"/>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!--分頁器。如果放置在swiper-container外面，需要自定義樣式。-->
        </div>
    </div>
</template>
<script>
import Swiper from 
 
"swiper"; //引入swiper依賴
    export default {
        data() {
            return {

            };
        },
        methods: {
          //封裝輪播函式
          getBanner() {
            //呼叫延遲載入 $nextTick
            this.$nextTick(() => {
              let swiper = new Swiper(".swiper-container", {
                
 
//是否迴圈
                loop: true,
                autoplay: {
                  //swiper手動滑動之後自動輪播失效的解決方法,包括觸碰，拖動，點選pagination,重新啟動自動播放
                  disableOnInteraction: false,
                  // 自動播放時間：毫秒
                  delay: 5000
                },
                pagination: {
                  
 
//小圓點
                  el: ".swiper-pagination"
                }
              });
            });
          },
        },
        mounted() {
          this.getBanner(); //輪播
        }
    };
</script>
<style lang="stylus" scoped>
.box
  position absolute
  width 100%
  height 100%
  background red
.swiper-container
  border 1px solid #0f0
  width 600px
  img 
    width 600px
    height 400px

</style>

解決 swiper設定loop為true時，echarts圖表不顯示在我另外一篇有寫

https://www.cnblogs.com/enhengenhengNymph/p/14172595.html