```html
<div class="demo-block" id="swiper-demo1">
  <lx-group-title>THX to: https://github.com/wechatui/swiper</lx-group-title>
  <lx-group-title>list模式下，默认高度为180px, 如果设置aspect-ratio会根据宽度自动计算高度</lx-group-title>
  <lx-swiper
    v-model="demo01_index"
    :list="demo01_list"
    @on-index-change="demo01_onIndexChange"
  />
  <p>current index: {{ demo01_index }}</p>
  <lx-x-button @click="demo01_index = 0">
    go to 0
  </lx-x-button>
  <lx-x-button @click="demo01_index = 1">
    go to 1
  </lx-x-button>
  <lx-x-button @click="demo01_index = 2">
    go to 2
  </lx-x-button>

  <br>
  <br>
  <lx-divider>华丽的分割线</lx-divider>

  <lx-group-title>自定义class,满足各种需求，u are King</lx-group-title>
  <lx-swiper
    :list="demo02_list"
    style="width:85%;margin:0 auto;"
    :aspect-ratio="300/800"
    dots-position="center"
    img-key="img_url"
    css-classes="custom"
  />
  <br>
  <br>

  <lx-group-title>设置aspect-ratio, 将自动根据宽度计算高度</lx-group-title>
  <lx-swiper
    :list="demo02_list"
    style="width:85%;margin:0 auto;"
    :aspect-ratio="300/800"
    dots-position="center"
    img-key="img_url"
  />

  <br>
  <br>
  <lx-divider>华丽的分割线</lx-divider>

  <lx-group-title>自动轮播</lx-group-title>
  <lx-swiper
    :list="demo03_list"
    auto
    style="width:80%;margin:0 auto;"
    height="180px"
    dots-class="custom-bottom"
    dots-position="center"
    img-key="img_url"
  />
  <br>
  <br>
  <lx-divider>华丽的分割线</lx-divider>

  <lx-group-title>use swiper-item for image list</lx-group-title>
  <lx-swiper :aspect-ratio="300/800">
    <lx-swiper-item
      v-for="item in demo04_list"
      :key="item"
      class="swiper-demo-img"
    >
      <img :src="item">
    </lx-swiper-item>
  </lx-swiper>

  <br>
  <br>
  <lx-divider>华丽的分割线</lx-divider>

  <lx-group-title>Async setting list data</lx-group-title>
  <lx-swiper
    :list="demo05_list"
    auto
    height="180px"
    @on-index-change="demo05_onIndexChange"
  />
  <p> current index: {{ demo05_index }}</p>
  <lx-x-button
    type="primary"
    style="margin: 10px 0;"
    @click="demo05_onLoad(1)"
  >
    Load list1
  </lx-x-button>
  <lx-x-button
    type="primary"
    style="margin: 10px 0;"
    @click="demo05_onLoad(2)"
  >
    Load list2
  </lx-x-button>

  <br>
  <br>
  <lx-divider>华丽的分割线</lx-divider>

  <lx-group-title>引入swiper-item自定义item内容，用height定义高度</lx-group-title>
  <lx-swiper
    auto
    height="100px"
  >
    <lx-swiper-item class="black">
      <h2 class="title fadeInUp animated">
        它无孔不入
      </h2>
    </lx-swiper-item>
    <lx-swiper-item class="black">
      <h2 class="title fadeInUp animated">
        你无处可藏
      </h2>
    </lx-swiper-item>
    <lx-swiper-item class="black">
      <h2 class="title fadeInUp animated">
        不是它可恶
      </h2>
    </lx-swiper-item>
    <lx-swiper-item class="black">
      <h2 class="title fadeInUp animated">
        而是它不懂你
      </h2>
    </lx-swiper-item>
    <lx-swiper-item class="black">
      <h2 class="title fadeInUp animated">
        我们试图
      </h2>
    </lx-swiper-item>
    <lx-swiper-item class="black">
      <h2 class="title fadeInUp animated">
        做些改变
      </h2>
    </lx-swiper-item>
  </lx-swiper>

  <br>
  <br>
  <lx-divider>华丽的分割线</lx-divider>

  <lx-group-title>垂直方向文字滚动</lx-group-title>
  <lx-swiper
    auto
    height="30px"
    direction="vertical"
    :interval="2000"
    class="text-scroll"
    :show-dots="false"
  >
    <lx-swiper-item><p>义务爱了 完成传奇世界H5-王者归来任务 获得20金币</p></lx-swiper-item>
    <lx-swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></lx-swiper-item>
    <lx-swiper-item><p>零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</p></lx-swiper-item>
    <lx-swiper-item><p>做迎而為 兑换【饿了么】畅享美食红包 消耗20金币</p></lx-swiper-item>
    <lx-swiper-item><p>只知道不知道 兑换【饿了么】畅享美食红包 消耗20金币</p></lx-swiper-item>
    <lx-swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></lx-swiper-item>
  </lx-swiper>

  <br>
  <br>
  <lx-divider>华丽的分割线</lx-divider>

  <lx-group-title>循环模式</lx-group-title>
  <lx-swiper
    v-model="demo06_index"
    loop
    auto
    :list="demo06_list"
    @on-index-change="demo06_onIndexChange"
  />
  <p>current index: {{ demo06_index }}</p>

  <lx-group-title>循环模式（只有两个）</lx-group-title>
  <lx-swiper
    v-model="demo07_index"
    loop
    auto
    :list="demo07_list"
    @on-index-change="demo07_onIndexChange"
  />
  <p>current index: {{ demo07_index }}</p>
</div>


<script>
// Swiper.md
const baseList = [{
  url: 'javascript:',
  img: 'https://dummyimage.com/200x100/894FC4/FFF.png&text=',
  title: '如何手制一份秋意的茶？'
}, {
  url: 'javascript:',
  img: 'https://dummyimage.com/200x100/894FC4/FFF.png&text=',
  title: '茶包VS原叶茶'
}, {
  url: 'javascript:',
  img: 'https://dummyimage.com/200x100/894FC4/FFF.png&text=',
  title: '播下茶籽，明春可发芽？'
}]

const imgList = [
  'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
  'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
  'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'
]

const urlList = baseList.map((item, index) => ({
  url: 'http://m.baidu.com',
  img: item.img,
  title: `(可点击)${item.title}`
}))

const demoList = imgList.map((one, index) => ({
  url: 'https://www.baidu.com',
  img_url: one,
  title: 'img_url'
}))

const only2List = baseList.slice(0, 2)

new Vue({
  el: '#swiper-demo1',
  
  data: {
    demo01_list: baseList,
    demo02_list: demoList,
    demo03_list: demoList,
    demo04_list: imgList,
    demo05_list: [],
    demo06_list: urlList,
    demo07_list: only2List,
    demo01_index: 0,
    demo05_index: 0,
    demo06_index: 0,
    demo07_index: 0
  },
  created () {
  },
  methods: {
    demo01_onIndexChange (index) {
      this.demo01_index = index
    },
    demo05_onIndexChange (index) {
      this.demo05_index = index
    },
    demo05_onLoad (id) {
      this.demo05_list = id === 1 ? baseList : demoList
    },
    demo06_onIndexChange (index) {
      this.demo06_index = index
    },
    demo07_onIndexChange (index) {
      this.demo07_index = index
    }
  }
})
</script>

<style>
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}

.custom {
  background-color: orange
}
</style>
```