<template>
  <div class="swipe-box">
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="(item,index) in comp.props.items.val" :key="index">
				<img class="imgheight" v-bind:src="item.imgUrl">
			</mt-swipe-item>
		</mt-swipe>
  </div>


</template>

<script>

export default {
  name: 'CompSwiper',
  props: ["comp", "cfg"],
  data() {
    return {
      imgs: [
        {url:'http://image.supercarrier8.com/product/earphone/1.png'}
      ]
    }
  },
  methods: {
  },
  watch:{
        "comp.props.items.val":function(n){
            setTimeout(()=>{
                $(".swipe-box").height($(".imgheight").height()+"px");
            },300);
        }
  },
  created(){
    let that=this
    that.mergeCompProps(that.comp);
    	that.comp.props.items.val = that.comp.props.items.val || [];
  },
  mounted: function () {
     setTimeout(()=>{
            // this.height = $(".imgheight").height()+"px";
            $(".swipe-box").height($(".imgheight").height()+"px");
        },300);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mint-swipe-item img {
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  /* background-size: 100%100%; */
}
</style>
