QCarousel 组件允许你使用幻灯片以更少的空间显示更多信息。也适用于创建向导或图片库。
¥The QCarousel component allows you to display more information with less real estate, using slides. Useful for creating Wizards or an image gallery too.
用法(Usage)
¥Usage
提示
如果 QCarouselSlide 内容也包含图片，并且你想使用滑动操作进行导航，你可能需要为它们添加 draggable="false"，否则原生浏览器的行为可能会产生负面影响。
¥If the QCarouselSlide content also has images and you want to use swipe actions to navigate, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.
Keep Alive
如果你需要此行为，请注意 QCarousel 的布尔值
keep-alive属性。请勿在 QCarouselSlide 上使用 Vue 原生的<keep-alive>组件。¥Please take notice of the Boolean
keep-aliveprop for QCarousel, if you need this behavior. Do NOT use Vue’s native<keep-alive>component over QCarouselSlide.如果你需要
keep-alive-include或keep-alive-exclude属性，则 QCarouselSlidename必须是有效的 Vue 组件名称（不允许有空格，不能以数字开头等）。¥Should you need the
keep-alive-includeorkeep-alive-excludeprops then the QCarouselSlidenames must be valid Vue component names (no spaces allowed, don’t start with a number etc).
基本(Basic)
¥Basic
下面是一个几乎精简的基本轮播（只有动画，并且仅指定了自定义过渡），没有嵌入导航。因此，我们将控制当前在模型中的滑动。
¥Below is an almost stripped down basic Carousel (it is just animated and only has custom transitions specified) with no navigation embedded. For this reason, we are controlling the current slide through the model.
过渡效果(Transitions)
¥Transitions
在以下示例中：
¥In the example below:
这里只演示了一些过渡效果。要查看完整的转换列表，请前往 过渡效果 页面。
¥There are just a few transitions demoed. For a complete list of transitions, head to the Transitions page.
你还可以用手指滑动（或用鼠标滑动 - 单击并快速向左/向右拖动然后释放）。
¥You can also swipe with your finger (or swiping with the mouse – clicking and quickly dragging to left/right then releasing).
垂直(Vertical)
¥Vertical
控件类型(Control type)
¥Control type
这里的 “control” 指的是箭头和导航按钮。由于它们是按钮，你还可以选择它们的类型以更好地匹配你的设计。你还可以从 control-color 和 control-text-color 属性中受益。
¥The notion of “control” here refers to the arrows and navigation buttons. Since they are buttons, you can also pick their type to better match your design. You also benefit from the control-color and control-text-color props.
导航位置(Navigation position)
¥Navigation position
自定义导航(Custom navigation)
¥Custom navigation
要查看 navigation-icon 插槽的属性的完整列表，请查阅 API 卡。
¥For a full list of properties of the navigation-icon slot, please consult the API card.
自动填充(Auto padding)
¥Auto padding
下面是一个示例，你可以使用不同的 QCarousel 设置来体验填充（或无填充）的效果：
¥Below is an example with which you can play with different QCarousel settings so you can see the padding (or lack of) in action:
媒体内容(Media content)
¥Media content
在下面的例子中，缩略图是自动生成的。缩略图仅适用于图片幻灯片。
¥In the example below there are thumbnails being generated automatically. Thumbnails only applies to image slides.
提示
不要将属性 navigation 与 thumbnails 一起使用，因为前者会取代后者，因此缩略图将不会显示。
¥Don’t use the property navigation along with thumbnails as the first supercedes the latter so the thumbnails will not be displayed.
无限和自动播放(Infinite and autoplay)
¥Infinite and autoplay
当指针悬停在轮播或感兴趣区域上时，你可以暂停自动播放。
¥You can pause autoplay when the pointer is over the carousel or over a region of interest.
控件(Controls)
¥Controls
使用 QScrollArea(With QScrollArea)
¥With QScrollArea
请注意以下两个示例中 QScrollArea 的使用方式。另请注意第二个示例中的 q-carousel--padding CSS 辅助类。
¥Please note how QScrollArea is used in the two examples below. Also note the q-carousel--padding CSS helper class in the second example.
全屏(Fullscreen)
¥Fullscreen