<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>