使用插件vue-awesome-swiper@3.1.3步骤 轮播图

1.下载 vue-awesome-swiper@3.1.3

npm install vue-awesome-swiper@3.1.3 --save

2.使用 vue-awesome-swiper

• 局部使用 配置文件:https://www.swiper.com.cn/api/index.html

import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

 export default {
  data() {
    return {
      active: 1,
       enterpriseOption: {
        // loop : true, //衔接
        slidesPerView: 2, //展示图片
        spaceBetween: 17, //距离
        slidesOffsetBefore: 15,//距离
        slidesOffsetAfter: 15
         // scrollbar: {
        //   el: ".swiper-scrollbar",
        //   hide: false
        // }
        
      },
       swiperList: [
        require("@/assets/image/apppage/swiper.png"),
        require("@/assets/image/apppage/swiper1.png"),
        require("@/assets/image/apppage/swiper2.png"),
        require("@/assets/image/apppage/swiper3.png")
      ]
    };
  },
  components: {
    swiper,
    swiperSlide
    },
 }

 <swiper class="swiper" :options="enterpriseOption">
        <swiper-slide v-for="(item,index) in swiperList" :key="index">
          <img :src="item" alt="图片" />
        </swiper-slide>
        <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
      </swiper>

• 全局挂载

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

配置文件:https://www.swiper.com.cn/api/index.html
参考:https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3