Weber更新日誌

組件概述

Carousel Thumbs（縮圖輪播）是自帶縮略預覽的輪播組件，此組件會在主輪播右側展示各輪播項的導覽，訪客可直接點擊輪播項導覽快速切換對應輪播項
組件結構：由左側【Main】輪播內容容器和右側【輪播項容器】輪播項導覽組成

適用場景

特殊結構輪播圖：如漏斗樣式等。非特殊結構建議使用【選項卡】組件

注意：組件結構複雜，樣式設置複雜，不建議非設計師/技術使用

組件使用

1、組件默認開啟【2列】，可以開啟【自動播放】、【懸浮切換選項】、【邊緣化】功能

2、選中【輪播項】層級可在Class的【Data-Checked】模式中，在【裝飾】修改選中狀態的【背景顏色】

3、在每個輪播項的【Inner】層級內可以添加任意基礎組件

4、【Inner】層級默認自帶【固定高度240px】、【邊框】樣式，可自定義修改

5、組件左右比例可在Class的【網格】中使用【列數】調整，在網格也可以控制左右兩部分的【間距】

示例：內容與選項比例【2:1】樣式

① 在【輪播圖】層級將【網格】的列數設置成6

② 選中【Main】層級在【網格】的【跨列數】設置成【4】

③ 選中【Thumbs】層級在【網格】的【跨列數】設置成【2】

注意：左右兩部分的【跨列數】相加必須等於網格的【列數】

成品案例