<template>
<!--  1.需要一个swiper
      2.swiper里面的滑动模块- swiperSlide
      3.分页器配置：插槽（slot）配置分页器-->
  <swiper :options="swiperOptions" >
    <swiper-slide v-for="(item,index) in swiperImgs" :key="index">
      <img class="swiper-slide-img" :style="{height: height}" :src="item" alt="" srcset="">
    </swiper-slide>

    <template v-slot:pagination>
      <div class="swiper-pagination">

      </div>
    </template>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'

export default {
  props: {
    // slide高度
    height: {
      type: String,
      default: 'auto'
    },
    swiperImgs: {
      type: Array,
      request: true,
      default: function () {
        return []
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data: function () {
    return {
      // swiper配置
      swiperOptions: {
        //  自动滚动
        autoplay: true,
        //  swiper高度跟随slide高度变化
        autoHeight: true,
        //  分页器设置效果
        pagination: {
          //  分页器对应的html元素
          el: '.swiper-pagination',
          //  分页器样式
          type: 'bullets'
        }
      }
    }
  },

  directives: {
    swiper: directive
  }

}

</script>

<style scoped>

</style>