<template>
  <div class="carouselTest">
     <!-- 间隔轮播 -->
     <poi-caraousel :interval="interval" class="testClass" :alway="true" :type="type">
        <poi-caraousel-item v-for="item in 4" :key="item" class="list">
            <h3>{{ item }}</h3>
        </poi-caraousel-item>
     </poi-caraousel>
     <!-- 无间隙轮播 -->
     <poi-caraousel :interval="interval1" class="testClass" :alway="true" :type="type1">
        <poi-caraousel-item v-for="item in 4" :key="item" class="list">
            <h3>{{ item }}</h3>
        </poi-caraousel-item>
     </poi-caraousel>
  </div>
</template>

<script>
export default {
  name: 'carouselTest',
  data () {
    return {
     // 目前提供 有间隙 ( space ) 无缝隙 ( continue ) 两种
     type:"space",
     // 有间隙 ( space )    推荐时间是 5000
     // 无缝隙 ( continue ) 推荐时间是 20
     interval:5000,

     type1:"continue",
     interval1:20,
    }
  }
}
</script>

<style scoped>
    *{
      padding: 0;
      margin: 0;
    }
    .testClass{
      width: 1000px;
      height: 300px;
      border: 2px solid red;
      margin: 10px auto;
    }
    h3{
      text-align: center;
      height: 100%;
      line-height: 300px;
    }
    .list{
      color:brown;
    }
    .list:nth-child(odd){
      background: #ccc;
    }
</style>
