vue2-3安装swiper轮播图

在vue2中

swiper所有版本中swiper4的兼容性是最好的，组件在 swiper4之后没有很大改变，使用时最好选择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"
  },

证明已经安装完成

接下来是引用
在main.js写入

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

如果要是不确定文件得位置，可以打开node_module文件夹会找到类似于下面图的目录

接下来在组件中使用

<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调用，因为这里dom已经初始化完成，js逻辑可以作用于dom了
    this.bannerPoint()
  },
  created() {
 
  },
  methods: {
    bannerPoint(){
      //这里return 我是设置了eslint规则，new字段不能单独写，要进行赋值
        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>
 

样式自己调吧，这只是简单的引入swiper

vue3 之前写的还没整理，下回再写吧