<template>
  <div class="page-swipe">
    <co-header fixed title="Swipe">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <p class="page-swipe-desc page-content-main">基础用法</p>
      <co-swipe :auto="4000">
        <co-swipe-item class="slide1">1</co-swipe-item>
        <co-swipe-item class="slide2">2</co-swipe-item>
        <co-swipe-item class="slide3">3</co-swipe-item>
      </co-swipe>

      <p class="page-swipe-desc">隐藏 indicators</p>
      <co-swipe :show-indicators="false">
        <co-swipe-item class="slide1">1</co-swipe-item>
        <co-swipe-item class="slide2">2</co-swipe-item>
        <co-swipe-item class="slide3">3</co-swipe-item>
      </co-swipe>

      <p class="page-swipe-desc">取消自动播放</p>
      <co-swipe :auto="0">
        <co-swipe-item class="slide1">1</co-swipe-item>
        <co-swipe-item class="slide2">2</co-swipe-item>
        <co-swipe-item class="slide3">3</co-swipe-item>
      </co-swipe>

      <p class="page-swipe-desc">设置默认显示页</p>
      <co-swipe :auto="0" :default-index="1">
        <co-swipe-item class="slide1">1</co-swipe-item>
        <co-swipe-item class="slide2">2</co-swipe-item>
        <co-swipe-item class="slide3">3</co-swipe-item>
      </co-swipe>

      <p class="page-swipe-desc">单个幻灯片</p>
      <co-swipe :show-indicators="false">
        <co-swipe-item class="slide1">SINGLE SLIDE</co-swipe-item>
      </co-swipe>
    </div>
  </div>
</template>

<style lang="less">
  .page-swipe{
    .co-swipe {
      height: 200px;
      color: #fff;
      font-size: 30px;
      text-align: center;
    }

    .co-swipe-item {
      line-height: 200px;
    }

    .slide1 {
      background-color: #0089dc;
      color: #fff;
    }

    .slide2 {
      background-color: #ffd705;
      color: #000;
    }

    .slide3 {
      background-color: #ff2d4b;
      color: #fff;
    }
  }
</style>
