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 样式，就大功告成了！