vue项目轮播图的实现

利用   Vue-Awesome-Swiper插件来做轮播效果，github地址：https://github.com/surmon-china/vue-awesome-swiper

 

   安装

npm install vue-awesome-swiper --save

 

页面中引用

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

import { swiper, swiperSlide } from 'vue-awesome-swiper'

代码如下：

<template>
<div class="wrapper">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.url" alt="">
    </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>
</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true //循环轮播
      },
      swiperList: [{
          id: '001',
          url: 'https://imgs.qunarzz.com/vs_ceph_vs_tts/fb5fbf5c-4f85-482b-91d6-4ce17a42618d.jpg_r_390x260x90_aae85edf.jpg'
      }, {
          id: '0002',
          url: 'https://imgs.qunarzz.com/sight/p0/1411/34/6aec007588037c2d9ef339d81aeba256.water.jpg_256x160_ec997312.jpg'
      }]
    }
  }
}
</script>

<style scoped>
.wrapper >>> .swiper-pagination-bullet-active {
    background: red;
}
.swiper-img {
     100%
}
.wrapper {
    overflow: hidden;
     100%;
    height: 0;
    padding-bottom: 31.25% /*相对于宽高比自动撑开 */
    /* 100%;
    height: 31.25vw; 除了上面那种方法，也可以这么写，意思是宽高比例*/
}
</style>