<template>
  <div>
    <div class="demo-title">
      内容
    </div>
    <bxs-swiper :pagination="!1">
      <bxs-swiper-item style="background-color: gray">
        第一项
      </bxs-swiper-item>
      <bxs-swiper-item style="background-color: green">
        第二项
      </bxs-swiper-item>
      <bxs-swiper-item style="background-color: plum">
        第三项
      </bxs-swiper-item>
    </bxs-swiper>
    <div class="demo-title">
      定高内容
    </div>
    <bxs-swiper
      style="height: 150px"
      :pagination-class="'pagination-class'"
      >
      <bxs-swiper-item>
        <div style="height: 160px; background-color: red; font-size: 60px; text-align: center;">
          item1
        </div>
      </bxs-swiper-item>
      <bxs-swiper-item>
        <div style="height: 170px; background-color: green; font-size: 60px; text-align: center;">
          item2
        </div>
      </bxs-swiper-item>
      <bxs-swiper-item>
        <div style="height: 150px; background-color: plum; font-size: 60px; text-align: center;">
          item3
        </div>
      </bxs-swiper-item>
      <bxs-swiper-item>
        <div style="height: 150px; background-color: tomato; font-size: 60px; text-align: center;">
          item4
        </div>
      </bxs-swiper-item>
    </bxs-swiper>
    <div class="demo-title">
      不定高内容
    </div>
    <bxs-swiper
      @slide="onSlide"
      @slide-prev="onSlidePrev"
      @slide-next="onSlideNext"
      >
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/100748111_4f8261df29ba812.jpeg"
          class="img-responsive"
          >
      </bxs-swiper-item>
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/waklman-banner_5e1a1600c9ad3c6.jpg"
          class="img-responsive"
          >
      </bxs-swiper-item>
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/walkman-cover_71344f89d390c1b.png"
          class="img-responsive"
          >
      </bxs-swiper-item>
    </bxs-swiper>
    <div class="demo-title">
      左右回弹
    </div>
    <bxs-swiper
      style="height: 130px"
      :loop="!1"
      >
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/100748111_4f8261df29ba812.jpeg"
          class="img-responsive"
          >
      </bxs-swiper-item>
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/waklman-banner_5e1a1600c9ad3c6.jpg"
          class="img-responsive"
          >
      </bxs-swiper-item>
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/walkman-cover_71344f89d390c1b.png"
          class="img-responsive"
          >
      </bxs-swiper-item>
    </bxs-swiper>
    <div class="demo-title">
      取消自动播放
    </div>
    <bxs-swiper
      style="height: 130px"
      :autoplay="!1"
      >
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/100748111_4f8261df29ba812.jpeg"
          class="img-responsive"
          >
      </bxs-swiper-item>
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/waklman-banner_5e1a1600c9ad3c6.jpg"
          class="img-responsive"
          >
      </bxs-swiper-item>
      <bxs-swiper-item>
        <img
          src="//media.winbaoxian.com/autoUpload/common/walkman-cover_71344f89d390c1b.png"
          class="img-responsive"
          >
      </bxs-swiper-item>
    </bxs-swiper>
  </div>
</template>
<script>
export default {
  methods: {
    onSlide(index) {
      console.log('onSlide:', index)
    },
    onSlidePrev(index) {
      console.log('onSlidePrev', index)
    },
    onSlideNext(index) {
      console.log('onSlideNext', index)
    },
  },
}
</script>
<style lang="css">
.demo-title {
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}
</style>
