转盘

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

安装

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

使用

TIP

如果QCarouselSlide内容也包含图像,并且您希望使用滑动操作进行导航,则可能需要将draggable="false"添加到图像中,否则本地浏览器行为可能会以负面方式干扰。

WARNING

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

基础

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

Basic

过渡

在下面的示例中:

  • 这里仅演示了一些转换。 有关过渡的完整列表,请转到过渡页面。
  • 您也可以用手指轻扫(或用鼠标轻扫 —— 单击并快速拖动到左/右然后释放)。
Transitions, bottom navigation, arrows and auto padding

垂直

Vertical mode

控件类型

这里“control”的概念是指箭头和导航按钮。因为它们是按钮,所以你也可以选择它们的类型来更好地匹配你的设计。您还可以从control-colorcontrol-text-color属性中获益。

Control Type

导航位置

Navigation position

自定义导航

有关navigation-icon插槽属性的完整列表,请参阅API卡。

Custom navigation

自动填充

下面是一个示例,您可以使用不同的QCarousel设置来播放,这样您就可以看到填充(或缺少)的效果:

Padding

媒体内容

Image slides
Multi-image slides
Captions
Video slides

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

Thumbnails

TIP

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

无限和自动播放

当指针位于转盘或感兴趣的区域上时,可以暂停自动播放。

Autoplay

控制项

Controls

使用QScrollArea

请注意下面两个示例中如何使用QScrollArea。还要注意第二个示例中的q-carousel--paddingCSS辅助类。

With QScrollArea and padding
With QScrollArea on whole slide

全屏

Fullscreen

QCarousel API

Loading API...
Please wait...

QCarouselControl API

Loading API...
Please wait...

QCarouselSlide API

Loading API...
Please wait...