Weber更新日誌

組件概述

輪播圖是單屏輪播展示組件，可放入多種基礎組件，自動或手動切換輪播內容

適用場景

網站首頁 Banner、產品多圖橫幅展示、客戶案例、宣傳素材輪播、活動公告等滾動展示。

不建議使用場景

1、需要複雜互動內容：輪播內不建議放置大量輸入表單等互動元件

2、小區域放超多輪播圖：移動端窄版容易造成體驗差、文字閱讀困難

3、純圖多圖瀏覽：建議改用【燈箱】、【燈箱集】、【Carousel Grid】組件

4、需要一屏展示多個輪播內容的：建議使用【一屏多個輪播圖】組件

組件使用

1、輪播圖可設置切換效果、輪播方向、時間間隙（需開啟【自動播放】），可以啟用箭頭、指示器、自動輪播功能

2、點擊輪播圖中【指示器】層級，可根據需求設置樣式（注意：① 【尺寸】設置不建議 <10px   ②【背景顏色】設置不建議使用80%以下透明度。以上兩個問題均會影響可讀性與SEO、無障礙頁面友好）

3、【箭頭】可在【Prev】與【Next】層級修改樣式

① 選中【Prev】/【Next】層級，可在Class的【邊距（內部留白）】、【裝飾（背景顏色/背景漸變/陰影）】、【文字版式（文字顏色）】、【邊框（圓角/寬度/顏色）】修改箭頭樣式

② 選中【Prev】/【Next】層級可在Class的【位置】調整箭頭的偏移位置

③ 技巧：可按住【Shift鍵】同時選中Prev和Next兩個，能同時修改樣式

4、輪播圖的【輪播項】內可以添加任意基礎組件，並支持自定義樣式（可修改邊距、背景、邊框，可添加背景）

注意事項

1、輪播圖組件默認初始含有 3個 【輪播項】。如果要樣式一致的輪播項，建議修改完一個【輪播項】後，刪除另外兩個初始自帶的輪播項，然後複製【已調整樣式的輪播項】進行內容替換，可保持輪播樣式同步並且節約樣式調整時間。

2、輪播圖會根據內容撐起高度，也可以在【輪播圖】層級設置統一高度。（注意：【輪播圖】層級默認有【最小高度240px】，如內容高度不足可修改成【Auto】自動高度）

3、建議統一所有輪播項高度，避免切換時畫面高低跳動

4、如要使用輪播背景，需注意文字疊加後與背景的對比度，確保文字在圖片上清晰可讀，符合無障礙閱讀。可以疊加【背景顏色】或【漸變色】

5、切換移動端時需要注意響應，可調降輪播高度，避免佔用過多畫面

6、在PC端和移動端都可以【拖拽滑動】輪播圖切換輪播項（注意：在編輯器中不建議拖拽滑動，容易造成組件層級結構偏移與錯位）

7、開啟【箭頭】或【指示器】功能後，所有端口將會同步開啟。如果部分端口不需要，可以選中【Prev】/【Next】/【指示器】層級在Class的【常規】➡️【顯示方式】➡️【Hidden隱藏】設置。

8、組件不能放置在【2列】容器內，在移動端時會出現【超出可視範圍】問題，如果需要左右構圖，可以使用【網格】組件

9、如果要添加【陰影】，建議在輪播項內再添加一個容器組件（例如：【2列】、【網格】、【Div】），然後在【輪播項】層級設置【內部留白】，給陰影留出顯示距離，凡是超出輪播項的部分都會被切除。