Swiper轮播图在Vue框架中的运用

要在Vue中运用Swiper需要下载Swiper插件
在命令行cmd（可以cd 根目录）输入

npm install vue-awesome-swiper --save

下载成功后，查看package.json中是否存在

在mian.js中全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
// 同时必须引入css样式文件
import 'swiper/css/swiper.css'

// 挂载到vue全局上

或在需要使用的界面引入

  require('swiper/css/swiper.css');
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
    components: {
      swiper,
      swiperSlide
    },

引入后便可以使用了
下面是我根据Swiper中文网中提供的教程做的Swiper轮播图 github地址
Html部分：

<template>
  <swiper :options="swiperOption" class="swiper-container swiper-pagination1"  ref="mySwiper">
          <!-- 添加的图片 -->
          <swiper-slide><img class="banner-img" src="https://res.vmallres.com/pimages//pages/picImages/E8poFW2xF0bISth9yLi7.jpg"/> </swiper-slide>
          <swiper-slide><img class="banner-img" src="https://res.vmallres.com/pimages//pages/picImages/0zJXgKgsDnZ8QoOF5rFH.jpg"/> </swiper-slide>
          <swiper-slide><img class="banner-img" src="https://res.vmallres.com/pimages//pages/picImages/5svSNfEBGG0Ento38IiB.jpg"/> </swiper-slide>
          <swiper-slide><img class="banner-img" src="https://res.vmallres.com/pimages//pages/picImages/bv5j4XkZk65XPmH6rtK5.png"/> </swiper-slide>
		  <swiper-slide><img class="banner-img" src="https://res.vmallres.com/pimages//pages/picImages/xgiGbFOMMqIfduyMkxOW.png"/> </swiper-slide>
		  <swiper-slide><img class="banner-img" src="https://res.vmallres.com/pimages//pages/picImages/tbWzBKicnSITdaMdohKg.jpg"/> </swiper-slide>
          <!-- Optional controls -->
          <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>
</template>

Script部分：

<script>
  require('swiper/css/swiper.css');
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          pagination: '.swiper-pagination1',
          slidesPerView: 1,
          spaceBetween: 30,
          centeredSlides: false,
          spaceBetween: 0,
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
            this.page = swiper.realIndex+1;
            this.index = swiper.realIndex;
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          //自动播放
          autoplay:{
            delay:5000,
            disableOnInteraction:false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          //循环
          loop:true
        }
      }
    },
    //定义swiper对象
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    mounted () {
      this.swiper.slideTo(0, 0, false);
    }
 
  }
</script>

自己另外加的Style：

<style>
	.swiper-container {
		cursor: pointer;
	}
	.swiper-pagination {
		float: right;
		margin-bottom: 65px;
	}
	.swiper-container-horizontal > .swiper-pagination-bullets {
	    bottom: 10px;
	    left: -172px;
	    width: 100%;
	}
	.swiper-button-prev {
		width:60px;
		height:60px;
		border-radius: 50%;
		background: #DCDCDC;
		opacity: 50%;		
		color: #FFFFFF;
		margin-top: -66px;
		margin-left: 370px;
	}
	.swiper-button-prev:hover {
		background:#A9A9A9;
	}
	.swiper-button-next {
		width:60px;
		height:60px;
		border-radius: 50%;
		background: #DCDCDC;
		opacity: 50%;
		color: #FFFFFF;
		margin-top: -66px;
		margin-right: 150px;
	}
	.swiper-button-next:hover{
		background:#A9A9A9;
	}
	.button-next {
		width:20px;
		height:20px;
		color: #FFFFFF;
	}
</style>

效果图：

为了还原与华为商城轮播图的相似度，更改了swiper.css中小圆点及左右按钮的属性。