Webflow 卡片滑桿：行動版啟用、桌面版停用（無需程式碼）

操作步驟

1. 加入滑桿元件

把 Webflow 原生的滑桿（Slider）元件放到頁面上你想要的位置。

2. 為 Slider Mask 設定 CSS 樣式

3. 加入一個樣式相同的 Div

Webflow 的 Slider Mask 版面配置預設無法直接修改。為了達成我們的目標，在滑桿外部加入一個 div，並讓它的 CSS 樣式與 Slider Mask 完全一致。

4. 調整版面配置

修改這個 div 的版面配置，從而間接改變 Slider Mask 的版面配置。

5. 自訂 Slide 的 CSS 樣式

到這一步，桌面版的 Slider Mask 版面配置已經調整完成。接下來自訂滑桿內各個 Slide 的 CSS 樣式，把卡片寬度設為 25%（假設有四張卡片，用 100% 除以 4；可依實際數量調整）。

6. 隱藏箭頭和滑桿導覽

調整之後滑桿就是這個樣子了。桌面版不需要滑桿箭頭和導覽，用 "display: none" 把它們隱藏起來。

7. 桌面版畫面完成！

調整後的效果如下圖所示。

8. 調整行動版滑桿

現在來最佳化行動版的滑桿，恢復 Webflow 滑桿原本的功能。

9. 修改 CSS 樣式

利用那個樣式相同的 div，把 Slider Mask 的版面配置重設為 static，並把 Slide 寬度調整為 100%。

10. 顯示箭頭和滑桿導覽

依需要重新啟用左右箭頭和滑桿導覽。

11. 刪除 Div

把頁面上那個與 Slider Mask 樣式相同的 div 刪掉。

12. 微調外觀

在這些基礎步驟之上，盡情發揮創意、依需要微調 CSS 樣式，就大功告成了！