VUE swiper.js引用使用轮播图

<template>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"
             v-for="(item, index) in banners"
             :key="index">
          <img :src="item.img"
               alt=""
               title="" />
        </div>
      </div>
      <div class="swiper-pagination"
           slot="pagination"></div>
    </div>
  </div>
</template>

<script> 
import Swiper from "swiper";
export default {
  name: "home",
  data () {
    return {
      checked: true,
      banners: [
        { img: require("../assets/img/banners.png") },
        { img: require("../assets/img/logo.png") },
        { img: require("../assets/img/banners.png") },
        { img: require("../assets/img/logo.png") }
      ],

    };
  },
  mounted () {
    // 轮播图
    new Swiper(".swiper-container", {
      // 如果需要分页器 这样写小圆点就有了
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      loop: true, // 循环模式选项
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    });

  },


};
</script>
<style scoped lang="scss">
.swiper-container {
  width: 100%;
  height: 4rem;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>

在main.js中引入（需将文件放在该路径下）

import "./assets/css/swiper.min.css";