<template>
<div class="wrapper">
  <swiper :options="swiperOption">
    <swiper-slide>
<img class="swiper-img" src="//img1.qunarzz.com/sight/source/1811/52/b6776b49d27025.jpg_r_640x214_35ae205c.jpg"/>
    </swiper-slide>
    <swiper-slide>
<img class="swiper-img" src="//img1.qunarzz.com/sight/source/1505/4e/3e87ee62e59cdb.jpg_r_640x214_fe6cc902.jpg"/>
    </swiper-slide>
    <swiper-slide>
<img class="swiper-img" src="//img1.qunarzz.com/sight/source/1505/c1/1178c5696fcf57.jpg_r_640x214_a69542c6.jpg" />
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
pagination: '.swiper-pagination'
}
}
}
}
</script>

<style scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: red 
.wrapper
// overflow:hidden
width:100%
height:0
padding-bottom: 31.25%
background: #eee
.swiper-img
width: 100%
</style>