Bricks 嵌套滑块进度条：给轮播加播放进度指示
有人问怎么给 Bricks 的嵌套滑块加一条播放进度条（SplideJS 官网那种效果）。SplideJS 需要一点自定义 JS 才能实现。
本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：How to create a progress bar for the nested slider in Bricks
结构搭建
按以下结构搭滑块，外层加 class .sliders-progress-wrapper：
- 外层容器：
.sliders-progress-wrapper - 进度条容器：用 Block 元素包裹（背景色即进度条底色）
- 进度条填充：子元素宽度由 JS 动态更新
JS 进度条逻辑
document.addEventListener('DOMContentLoaded', () => {
// 选取页面上所有带进度条的滑块
const sliders = document.querySelectorAll('.sliders-progress-wrapper');
// 没有则停止
if (sliders.length < 1) return;
// 防抖函数
const debounce = (fn, threshold) => {
var timeout;
threshold = threshold || 200;
return function debounced() {
clearTimeout(timeout);
timeout = setTimeout(fn, threshold);
};
};JS 监听 Splide 的 move/autoplay 事件，按当前页/总页数计算进度百分比，更新进度条填充宽度；窗口 resize 时防抖重算。
小结
- 零插件，SplideJS 原生事件驱动
- 进度条让用户感知轮播节奏
- 适合产品展示、案例墙等场景
延伸阅读
延伸阅读
tutorial
Bricks 嵌套滑块做网格轮播：用 SplideJS 扩展实现多行多列
教程：在 Bricks 默认嵌套滑块(nested slider)里做出多行多列的网格轮播效果，用 SplideJS 的 grid 扩展实现，适合产品墙/案例墙展示。
tutorialBricks Tabs 自动轮播：滚动到可视区自动切换标签页
教程：给 Bricks 的 Tabs（Nestable）元素加自动轮播——滚动到可视区域后每 x 秒自动切换标签页，适合首页产品/方案展示。
tutorialBricks 判断 ACF Repeater 是否有数据行：条件输出进阶
教程：在 Bricks 里用自定义函数判断 ACF Repeater 字段是否有数据行，从而条件显示元素。解决基础类型条件判断搞不定的数组型字段。
tutorialBricks 给区块加草稿状态开关：编辑器里隐藏未定稿区块
教程：用代码片段给 Bricks 所有元素加一个“草稿状态”勾选框，勾选后前端不输出。适合临时隐藏未定稿区块（Bricks 2.0 已原生内置，本文作历史方案参考）。