vue-awesome-swiper（轮播图vue插件）

1.安装：npm install vue-awesome-swiper --save

2.在main.js里面引入

// 引入轮播图插件

import Vue from 'vue'

import vueSwiper from 'vue-awesome-swiper'

/* 样式的话，我这里有用到分页器，就在全局中引入了样式 */

import 'swiper/dist/css/swiper.css'

Vue.use(vueSwiper);

3.在具体页面引入

import HelloWorld from ‘@/HelloWorld’

在Vue实例对象里面注册组件 componts:{

HelloWorld

}

4.具体代码

<template>

  <swiper :options="SwiperOptions">

    <swiper-slide v-for="(item,index) of commodity" :key="'commodity' + index ">

      <div style="height:100px">

        <img src=item />

      </div>

    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>

  </swiper>

</template>

<script>

export default {

  name: "HelloWorld",

  data() {

    return {

      SwiperOptions: {//滚动页配置

        autoplay: {//自动滚动配置

          delay: 1500,

          stopOnLastSlide: false,

          disableOnInteraction: false

        },

        slidesPerView: "auto",//一页显示几个

        freeMode: true,

        observer: true, //修改swiper自己或子元素时，自动初始化swiper

        observeParents: true, //修改swiper的父元素时，自动初始化swiper

        pagination: { //指示器配置

          el: ".swiper-pagination"

        }

      },

      commodity: [

        "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",

        "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",

        "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",

        "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",

        "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg"

      ]

    };

  }

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<!-- 修改指示器属性 -->

<style scoped>

.swiper-pagination-bullet-active {

  opacity: 1;

  background: #aeaeae !important;

}

.swiper-pagination-bullet {

  width: 4px !important;

  height: 4px !important;

  display: inline-block;

  border-radius: 100%;

}

.swiper-pagination-fraction,

.swiper-pagination-custom,

.swiper-container-horizontal > .swiper-pagination-bullets {

  bottom: -2px;

}

</style>