<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item of swiperOptions.banners" :key="item.id">
        <img
          class="swiper_img"
          :src="item.url"
          alt
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "banner",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          loop:true
        },
        banners: [
          {
            id: '001',
            url:"https://imgs.qunarzz.com/vs_ceph_vcimg/b8c4527c41649814cc4cf86880abba54.jpeg"
          },
          {
            id: '002',
            url:"https://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg"
          },
          {
            id: '003',
            url:"https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg"
          }
        ]
      }
    };
  },
//   computed: {
//     swiper() {
//       return this.$refs.mySwiper.$swiper;
//     }
//   },
//   mounted() {
//     // console.log("Current Swiper instance object", this.swiper);
//     this.swiper.slideTo(3, 1000, false);
//   }
};
</script>
<style lang="stylus" scoped>

.swiper >>> .swiper-pagination-bullet-active {
  background: red;
}

.swiper_img {
  width: 100%;
  height: 3rem;
}

.swiper {
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 3rem;
  background: #eee;
}
</style>