QCarousel 元件讓您可以使用幻燈片以較小的空間顯示更多資訊。也適用於建立精靈或圖片庫。
用法
提示
如果 QCarouselSlide 內容也包含圖片，並且您想要使用滑動手勢來導航，您可能需要將 `draggable="false"` 新增到圖片中，否則原生瀏覽器行為可能會產生負面干擾。
保持啟用
- 如果您需要此行為，請注意 QCarousel 的布林 `
keep-alive` 屬性。請勿在 QCarouselSlide 上使用 Vue 的原生 `<keep-alive>` 元件。 - 如果您需要 `
keep-alive-include` 或 `keep-alive-exclude` 屬性，則 QCarouselSlide 的 `name` 必須是有效的 Vue 元件名稱 (不允許空格，且開頭不能是數字等)。
基本
以下是一個幾乎精簡的基本輪播 (僅動畫化且僅指定自訂轉場效果)，沒有嵌入導航。因此，我們透過模型控制目前的幻燈片。
轉場效果
在以下範例中
- 這裡僅示範了幾個轉場效果。如需完整的轉場效果列表，請前往 轉場效果 頁面。
- 您也可以用手指滑動 (或用滑鼠滑動 – 按一下並快速向左/向右拖曳然後放開)。
垂直
控制類型
這裡的「控制」概念指的是箭頭和導航按鈕。由於它們是按鈕，您也可以選擇它們的類型以更好地符合您的設計。您還可以受益於 `control-color` 和 `control-text-color` 屬性。
導航位置
自訂導航
如需 `navigation-icon` 插槽的完整屬性列表，請查閱 API 卡片。
自動內距
以下範例讓您可以試用不同的 QCarousel 設定，以便查看實際運作中的內距 (或缺少內距)。
媒體內容
在以下範例中，縮圖會自動產生。縮圖僅適用於圖片幻燈片。
提示
請勿同時使用 `navigation` 和 `thumbnails` 屬性，因為前者會取代後者，因此不會顯示縮圖。
無限和自動播放
當指標懸停在輪播或感興趣區域上方時，您可以暫停自動播放。
控制項
使用 QScrollArea
請注意以下兩個範例中 QScrollArea 的使用方式。另請注意第二個範例中的 `q-carousel--padding` CSS 輔助類別。