在vue2中

swiper所有版本中swiper4的兼容性是最好的，組件在 swiper4之后沒有很大改變，使用時(shí)最好選擇swiper4。

npm install swiper@4.5.1 --save-dev
或者
cnpm install swiper@4.5.1 --save-dev

安裝完成可以去package.json中去查看是否安裝完成

"dependencies": {
    "core-js": "^3.8.3",
    "element-ui": "^2.15.9",
    "font-awesome": "^4.7.0",
    "swiper": "^4.5.1",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },

證明已經(jīng)安裝完成

接下來是引用
在main.js寫入

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

如果要是不確定文件得位置，可以打開node_module文件夾會(huì)找到類似于下面圖的目錄

image.png

接下來在組件中使用

<template>
  <div class="container">
      <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="index">
            <a target="_blank" :href="item.url">
              <div class="pic">
                <img
                  class="img"
                  :src="item.src"
                  alt=""
                  style="height: 600px; width: 100%"
                />
              </div>
            </a>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>
 
<script>
import Swiper from "swiper"
export default {
  data() {
    return {
        list: [
        {
          src: require('../../assets/banner.png')
        },
        {
          src: require('../../assets/banner.png')
        },
        {
          src: require('../../assets/banner.png')
        },
        {
          src: require('../../assets/banner.png')
        },
        {
          src: require('../../assets/banner.png')
        }
      ]
    }
  },
  mounted() {
    //在mounted調(diào)用，因?yàn)檫@里dom已經(jīng)初始化完成，js邏輯可以作用于dom了
    this.bannerPoint()
  },
  created() {
 
  },
  methods: {
    bannerPoint(){
      //這里return 我是設(shè)置了eslint規(guī)則，new字段不能單獨(dú)寫，要進(jìn)行賦值
        return new Swiper('.swiper-container', {
        loop: true,
        autoplay: {
          delay: 5000, // 1秒切換一次
          disableOnInteraction: false
        },
        updateOnImagesReady: true,
        slidesPerView: 1,
        spaceBetween: 0,
        // spaceBetween : '10%',按container的百分比

        observer: true,
        observeParents: true,
        observeSlideChildren: true,

        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      })
    }
  },
}
  
</script>
 
<style lang="scss" scoped>
</style>
 

樣式自己調(diào)吧，這只是簡(jiǎn)單的引入swiper

vue3 之前寫的還沒整理，下回再寫吧