輪播元件 carousel-component
核心元件轉盤元件可讓內容作者以可導覽的轉盤呈現內容。
使用情況 usage
內容作者可使用轉盤元件，將內容整理在旋轉的幻燈片轉盤中。
編輯對話方塊可讓內容作者建立、命名及排序多個幻燈片，以及啟用自動切換並延遲。 使用設計對話方塊，範本作者可以定義哪些元件可以新增到輪播、啟用或停用自動切換，以及自訂樣式。
版本和相容性 version-and-compatibility
輪播元件的目前版本是v1，此版本隨2018年10月的核心元件2.2.0版的發佈引入，說明見本文。
下表詳細說明元件的所有支援版本、與元件版本相容的AEM版本，以及舊版檔案的連結。
如需核心元件版本的詳細資訊，請參閱檔案核心元件版本。
範例元件輸出 sample-component-output
若要體驗轉盤元件並檢視其設定選項範例以及HTML和JSON輸出，請造訪元件資料庫。
技術細節 technical-details
在GitHub🔗上可找到有關轉盤元件的最新技術檔案。
在核心元件開發人員檔案中可找到有關開發核心元件的進一步詳細資料。
面板的深層連結 deep-linking
若要這麼做：
- 在頁面編輯器中使用 以發佈的形式檢視 選項，檢視含有元件的頁面。
- Inspect頁面內容並識別面板的ID。
- 例如
id="carousel-bfe4fa6647-item-47f1a7ca67-tabpanel"
- 例如
- ID會成為您可以使用雜湊(
#)附加至URL的錨點。- 例如
https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#carousel-bfe4fa6647-item-47f1a7ca67-tabpanel
- 例如
導覽至將面板ID當作錨點的URL，瀏覽器會直接捲動至特定元件，並顯示指定的面板。 如果面板設定為預設不顯示，則會自動捲動至。
輪播和回應式設計 responsive-design
所有核心元件的設計都可充分回應，確保裝置間的順暢體驗。
部分進階元件（如轉盤元件）可能需要在實施專案的內容中特別考量，以在所有情況下保持回應能力。 如需詳細資訊，請參閱檔案核心元件的回應式設計。
編輯對話方塊 edit-dialog
內容作者可以使用「編輯」對話方塊來新增、重新命名和重新排列幻燈片，以及定義自動切換效果設定。
專案標籤 items-tab
轉盤元件
使用 新增 按鈕開啟元件選擇器，選擇要新增為索引標籤的元件。 新增專案後，專案會新增到清單中，包含以下欄：
- 圖示 — 標籤元件型別的圖示，可在清單中輕鬆識別。 將滑鼠移到上方以檢視完整的元件名稱作為工具提示。
- 描述 — 用作索引標籤文字的描述，預設為針對索引標籤選取的元件名稱。
- 刪除 — 點選或按一下以從索引標籤元件中刪除索引標籤。
- 重新排序 — 點選或按一下並拖曳以排序標籤。
屬性標籤 properties-tab
轉盤元件
在 屬性 標籤上，內容作者可以設定投影片自動切換。
-
作用中專案 — 內容作者可以定義載入頁面時作用中的索引標籤。
-
自動切換投影片 — 啟用時，元件會在指定的延遲之後自動前進到下一張投影片。
-
切換延遲 — 選取自動切換幻燈片時，此值可用來定義切換之間的延遲（以毫秒為單位）。
-
停用暫留時自動暫停 — 選取 自動切換投影片 時，只要游標暫留在輪播上，輪播切換就會自動暫停。 選取此選項，轉變將不會暫停。
-
ID — 此選項可控制HTML和資料層中元件的唯一識別碼。
- 如果保留為空白，系統會自動為您產生唯一ID，並可透過檢查結果頁面找到該ID。
- 若指定ID，作者應負責確認該ID為唯一ID。
- 變更ID會對CSS、JS和資料層追蹤造成影響。
協助工具標籤 accessibility-tab
![轉盤元件[編輯]對話方塊的[協助工具]索引標籤](./media_141a3a80105d36d955df31b6aacdd5c8585874613.png?width=750&format=png&optimize=medium)
在 協助工具 標籤上，可以為元件設定ARIA協助工具標籤的值。
- Label — 轉盤的aria-label屬性值，用以描述轉盤的內容
- Previous — 輪播導覽的上一個按鈕標籤的aria-label屬性值
- 下一步 — 轉盤導覽的下一個按鈕標籤的aria-label屬性值
- 播放 — 轉盤導覽的播放按鈕標籤的aria-label屬性值
- Pause — 輪播導覽的暫停按鈕標籤的aria-label屬性值
- 標籤清單 — 輪播導覽的專案清單標籤的aria-label屬性值
- 將專案的aria標籤設定為其標題 — 如果勾選，此選項會自動將輪播專案標題設定為其aria-label說明。
選取面板 select-panel
內容作者可以使用元件工具列上的 選取面板 選項，變更到不同的幻燈片進行編輯，以及輕鬆地重新排列幻燈片的順序。
在元件工具列中選取 選取面板 選項後，已設定的幻燈片會顯示為下拉式清單。
- 清單會依指派給幻燈片的排列方式排序，並會反映在編號中。
- 首先顯示幻燈片的元件型別，然後是較細字型的幻燈片說明。
- 在下拉式清單中點選或按一下專案，會在編輯器中將檢視切換至該幻燈片。
- 您可以使用拖曳操作框就地重新排序幻燈片。
設計對話方塊 design-dialog
範本作者可以使用「設計」對話方塊來定義哪些元件可以新增為轉盤元件的投影片，以及定義自動切換預設值和哪些自訂樣式可供內容作者使用。
屬性標籤 properties-tab-1
當內容作者將轉盤元件新增到頁面時，屬性 索引標籤是用來定義幻燈片轉換的預設設定。
![輪播元件的[設計]對話方塊](./media_13eea80a18f83433a728f5252f21ac3e562f79a3d.png?width=750&format=png&optimize=medium)
- 自動切換投影片 — 定義內容作者在將轉盤元件新增至頁面時，是否預設啟用自動將轉盤前進到下一張投影片的選項。
- 在控制項元素前面加上 — 勾選後，控制項元素會放在轉盤專案的前面，以改善協助工具。
允許的元件標籤 allowed-components-tab
允許的元件 索引標籤是用來定義哪些元件可由內容作者新增為轉盤元件的投影片。
當在範本編輯器中定義配置容器的原則與屬性時，「允許的元件」索引標籤的功能與相同名稱的索引標籤相同。
樣式索引標籤 styles-tab
轉盤元件支援AEM 樣式系統。
Adobe使用者端資料層 data-layer
轉盤元件支援Adobe使用者端資料層。