vue中swiper@5.3.6使用，

背景

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

下載命令 ：

npm install swiper@5.3.6 --save

在main.js中引入：

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

在.vue頁面中使用：

<template>
    <div class="box">
　　　　//這里往下的class類一定不要改變，改變就會報錯
　　　　//Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

        <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依賴  在使用過程中我發現有時候開頭字母大寫可以成功 、有時候小寫 若報錯就換成另一個，兩者引入取其一

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