转盘

QCarousel组件使您可以使用幻灯片以更少的空间显示更多信息。 对于创建向导或图像库也很有用。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

使用

WARNING

如果需要这种行为,请注意QCarousel的布尔值keep-alive属性。 不要在QCarouselSlide上使用Vue的原生<keep-alive>组件。

以下是几乎精简的基础转盘(仅是动画,仅指定了自定义转场),没有嵌入导航。 因此,我们正在通过模型控制当前幻灯片。

Basic

TIP

在下面的示例中,仅演示了一些转换。 有关过渡的完整列表,请转到过渡页面。

Transitions, bottom navigation, arrows and auto padding

TIP

在上面的示例中,您还可以用手指滑动(或用鼠标滑动-单击并快速向左/向右拖动然后释放)。

媒体内容

Image slides
Multi-image slides
Captions
Video slides

在下面的示例中,将自动生成缩略图。 缩略图仅适用于图像幻灯片。

Thumbnails

TIP

不要将属性navigationthumbnails一起使用,因为它会被取代,并且不会显示缩略图。

无限和自动播放

Autoplay

控制项

Controls

全屏

Fullscreen

QCarousel API

Loading API...
Please wait...

QCarouselControl API

Loading API...
Please wait...

QCarouselSlide API

Loading API...
Please wait...