QCarousel 组件让您可以用更少的页面空间展示更多信息——通过幻灯片的方式呈现内容。它同样适合用来创建向导流程或图片画廊。
用法
TIP
如果 QCarouselSlide 的内容中包含图片，并且您希望使用滑动手势来切换幻灯片，建议为图片添加 draggable="false" 属性，否则浏览器的原生拖拽行为可能会产生干扰。
Keep Alive
- 如果您需要保活行为，请注意 QCarousel 的布尔属性
keep-alive。请勿在 QCarouselSlide 上使用 Vue 原生的<keep-alive>组件。 - 如果您需要使用
keep-alive-include或keep-alive-exclude属性，那么 QCarouselSlide 的name必须是合法的 Vue 组件名称（不能包含空格，不能以数字开头等）。
基础用法
下面是一个极简的基础轮播示例（仅带有动画效果和自定义过渡），没有内嵌导航控件。因此，我们通过 model 数据来控制当前显示的幻灯片。
过渡效果
在下面的示例中：
- 这里只演示了部分过渡效果。完整的过渡效果列表请查看过渡效果页面。
- 您也可以通过手指滑动（或用鼠标点击后快速向左/右拖拽然后松开）来切换。
垂直模式
控制按钮类型
这里的"控制"指的是箭头和导航按钮。由于它们本质上是按钮，您可以选择不同的按钮类型来更好地配合您的设计风格。您还可以使用 control-color 和 control-text-color 属性来自定义颜色。
导航位置
自定义导航
关于 navigation-icon 插槽的完整属性列表，请参阅 API 卡片。
自动内边距
下面的示例可以让您调整不同的 QCarousel 设置，以便观察内边距的实际效果（有或没有内边距时的区别）：
媒体内容
下面的示例会自动生成缩略图。缩略图功能仅适用于图片类型的幻灯片。
TIP
不要将 navigation 属性与 thumbnails 一起使用，因为前者会覆盖后者，导致缩略图不会显示。
无限循环和自动播放
当鼠标悬停在轮播区域或感兴趣的区域上方时，可以暂停自动播放。
控制按钮
配合 QScrollArea 使用
请注意下面两个示例中 QScrollArea 的用法。同时注意第二个示例中使用的 q-carousel--padding CSS 辅助类。