<template>

<div class="wrapper">

  <swiper :options="swiperOptions">

    <swiper-slide>

      <img class="swiper-img" src="https://imgs.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg">

    </swiper-slide>

    <swiper-slide>

      <img class="swiper-img" src="https://imgs.qunarzz.com/sight/source/1811/b8/5d599bbdcf8b57.jpg_r_640x214_2ee055e3.jpg">

    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>

  </swiper>

</div>

</template>

<script>

export default {

  name: 'HomeSwiper',

  data () {

    return {

      swiperOptions: {

        pagination: '.swiper-pagination',

        loop: true

      }

    }

  }

}

</script>

<style lang="stylus" scoped>

  .wrapper >>> .swiper-pagination-bullet-active

    background: #fff

  .wrapper

    overflow: hidden

    width: 100%

    height: 0

    padding-bottom: 31.25%

    background: #eee

    .swiper-img

      width: 100%

</style>