Carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容

卡片模式

当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格将 type 属性设置为 card 即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，卡片模式可以通过直接点击两侧的幻灯片进行切换。

vue

<template>
  <div>
    <QyCarousel type="card">
    </QyCarousel>
  </div>
</template>

<script lang="ts" setup>
</script>

<template>
  <div>
    <QyCarousel type="card">
    </QyCarousel>
  </div>
</template>

<script lang="ts" setup>
</script>

垂直排列

默认情况下，方向 direction 为水平 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。

vue

<template>
  <div style="margin-left: 200px">
    <QyCarousel type="card" direction="vertical">
    </QyCarousel>
  </div>
</template>

<script lang="ts" setup>
</script>

<template>
  <div style="margin-left: 200px">
    <QyCarousel type="card" direction="vertical">
    </QyCarousel>
  </div>
</template>

<script lang="ts" setup>
</script>

Attributes

属性名	说明	类型	可选值	默认值
height	carousel 的高度	string	—	—
initial-index	初始状态激活的幻灯片的索引，从 0 开始	number	—	0
trigger	指示器的触发方式	string	hover/click	hover
autoplay	是否自动切换	boolean	—	true
interval	自动切换的时间间隔，单位为毫秒	number	—	3000
indicator-position	指示器的位置	string	outside/none	—
arrow	切换箭头的显示时机	string	always/hover/never	hover
type	carousel 的类型	string	card	—
loop	是否循环显示	boolean	-	true
direction	展示的方向	string	horizontal/vertical	horizontal
pause-on-hover	鼠标悬浮时暂停自动切换	boolean	-	true