走马灯 - Carousel

示例

默认样式

点击查看源码

<template>
  <Carousel>
    <CarouselItem :key="index" v-for="(item, index) in 6">{{
      item
    }}</CarouselItem>
  </Carousel>
</template>

<script>
import { Carousel, CarouselItem } from "@wanmaoor/giaoui";
export default {
  name: "carousel-demo",
  components: { Carousel, CarouselItem }
};
</script>

取消自动播放

点击查看源码

<template>
  <Carousel :autoplay="false">
    <CarouselItem :key="index" v-for="(item, index) in 6">{{
      item
    }}</CarouselItem>
  </Carousel>
</template>

<script>
import { Carousel, CarouselItem } from "@wanmaoor/giaoui";
export default {
  name: "carousel-demo",
  components: { Carousel, CarouselItem }
};
</script>

触发器

默认使用mouseenter事件作为 indicator 的触发器, 也可以使用click事件作为触发器

点击查看源码

<template>
  <Carousel trigger="click">
    <CarouselItem :key="index" v-for="(item, index) in 6">{{
      item
    }}</CarouselItem>
  </Carousel>
</template>

<script>
import { Carousel, CarouselItem } from "@wanmaoor/giaoui";

export default {
  name: "carousel-demo-2",
  components: { Carousel, CarouselItem }
};
</script>

切换动效

有三种切换特效选择: slide, fade, zoom. 默认选中slide

点击查看源码

<template>
  <Carousel>
    <CarouselItem :key="index" v-for="(item, index) in 4">{{
      item
    }}</CarouselItem>
  </Carousel>
  <Carousel type="fade">
    <CarouselItem :key="index" v-for="(item, index) in 5">{{
      item
    }}</CarouselItem>
  </Carousel>
  <Carousel type="zoom">
    <CarouselItem :key="index" v-for="(item, index) in 6">{{
      item
    }}</CarouselItem>
  </Carousel>
</template>

<script>
import { Carousel, CarouselItem } from "@wanmaoor/giaoui";

export default {
  name: "carousel-demo-3",
  components: { CarouselItem, Carousel }
};
</script>

自定义高度

默认高度为200px

点击查看源码

<template>
  <Carousel height="300px">
    <CarouselItem :key="index" v-for="(item, index) in 6">{{
      item
    }}</CarouselItem>
  </Carousel>
</template>

<script>
import { Carousel, CarouselItem } from "@wanmaoor/giaoui";

export default {
  name: "carousel-demo-4",
  components: { Carousel, CarouselItem }
};
</script>

API

参数	说明	接受类型	默认值	可选参数
trigger	触发切换的事件	string	mounseenter	click
autoplay	是否自动切换	boolean	true	false
height	定义走马灯的高度	string	200px
interval	切换时间间隔	number	3000
type	切换动效	string	slide	zoom