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 {
     width: 100%
 }
 .wrapper {
     overflow: hidden;
     width: 100%;
     height: 0;
     padding-bottom: 31.25% /*相对于宽高比自动撑开 */
     /* width:100%;
     height: 31.25vw; 除了上面那种方法，也可以这么写，意思是宽高比例*/
 }
 </style>