在vue Cli 中使用Swiper插件

安装（必须携带版本，最新版本有问题）

npm install vue-awesome-swiper@3 --save-dev
//或
npm i vue-awesome-swiper@3 -D
cnpm i vue-awesome-swiper@3 -D

封装一个组件去使用他，不需要全局引入

swiper为轮播图容器UI
swiper-slide为轮播的内容
img中的图片进行替换就能正确显示，注意图片的格式大小，不然会出现问题

更多问题请访问https://www.swiper.com.cn/api/index.html

<template>
	<div>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- <swiper-slide>
        <a href="">
          <img src="../../../assets/banner/banner3.jpg" alt="">
        </a>
      </swiper-slide> -->
      <swiper-slide>
        <a href="">
          <img src="../../../assets/banner/banner1.png" alt="" width="100%" height="322px">
        </a>
      </swiper-slide>
      <swiper-slide>
        <a href="">
          <img src="../../../assets/banner/banner2.jpg" alt="" width="100%" height="322px">
        </a>
      </swiper-slide>
      <swiper-slide>
        <a href="">
          <img src="../../../assets/banner/banner3.jpg" alt="" width="100%" height="322px">
        </a>
      </swiper-slide>
      <swiper-slide>
        <a href="">
          <img src="../../../assets/banner/banner4.jpg" alt="" width="100%" height="322px">
        </a>
      </swiper-slide>
      <swiper-slide>
        <a href="">
          <img src="../../../assets/banner/banner5.jpg" alt="" width="100%" height="322px">
        </a>
      </swiper-slide>
      <swiper-slide>
        <a href="">
          <img src="../../../assets/banner/banner6.jpg" alt="" width="100%" height="322px">
        </a>
      </swiper-slide>
      // 分页器
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      // 前进后退按钮
      <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
      <!-- <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
	</div>
</template>

<script>
//轮播图vue插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
	components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
}
</script>

<style lang="scss" scoped>

</style>