走马灯 Carousel

基本

<za-carousel direction="left" @changeStart="handleChangeStart" @changeEnd="handleChangeEnd">
  <za-carousel-item :key="index" class="carousel-item-pic" v-for="(i, index) in ITEMS">
    <img :src="i.url" :alt="i.img" :draggable="false">
  </za-carousel-item>
</za-carousel>

纵向

<za-carousel height="48vw" direction="bottom" @changeStart="handleChangeStart" @changeEnd="handleChangeEnd">
  <za-carousel-item :key="index" class="carousel-item-pic" v-for="(i, index) in ITEMS">
    <img :src="i.url" :alt="i.img" :draggable="false">
  </za-carousel-item>
</za-carousel>

循环轮播

<za-carousel ref="carousel" direction="left" :swipeable="false" loop @changeStart="handleChangeStart" @changeEnd="handleChangeEnd">
  <za-carousel-item :key="index" class="carousel-item-pic" v-for="(i, index) in ITEMS">
    <img :src="i.url" :alt="i.img" :draggable="false">
  </za-carousel-item>
</za-carousel>
<div class="controls" style="text-align:center;padding-bottom:20px;">
  <za-button size="sm" @click="onJumpTo">无动画切换指定页</za-button>
  <za-button size="sm" style="margin-left:10px;" @click="onSlideTo">滑动到指定页</za-button>
</div>

自动轮播

<za-carousel direction="left" :swipeable="false" loop auto-play>
  <za-carousel-item :key="index" v-for="(i, index) in ITEMS">
    <div class="carousel-item-pic">
      <img :src="i.url" :alt="i.img" :draggable="false">
    </div>
  </za-carousel-item>
</za-carousel>

Vue Script

<script name="vue">
const ITEMS = [
  {
    url: 'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
    img: '1',
  },
  {
    url: 'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
    img: '2',
  },
  {
    url: 'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
    img: '3',
  },
];

export default {
  data() {
    return {
      ITEMS,
      i: {}
    }
  },
  methods: {
    handleChangeStart(index){
      console.log(index);
    },
    handleChangeEnd(index){
      console.log(index);
    },
    onJumpTo(){
      this.$refs.carousel.onJumpTo(0)
    },
    onSlideTo(){
      this.$refs.carousel.onSlideTo(2)
    }
  },
};
</script>

API

Carousel Attributes

Carousel Events