转盘

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

QCarousel API

QCarouselControl API

QCarouselSlide API

使用

TIP

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

Keep Alive

  • 如果需要这种行为,请注意QCarousel的布尔值keep-alive属性。 不要在QCarouselSlide上使用Vue的原生<keep-alive>组件。
  • 如果需要keep-alive-includekeep-alive-exclude属性,则QCarouselSlide的name必须是有效的Vue组件名称(不允许空格,不要以数字等开头)。

基础

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




过渡

在下面的示例中:

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



垂直




控件类型

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




导航位置




自定义导航

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




自动填充

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




媒体内容













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




TIP

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

无限和自动播放

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




控制项




使用QScrollArea

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







全屏