为 Bricks 嵌套轮播添加进度条

“目录”

• text: “DOM 结构”

• text: “JavaScript”

— 本教程教你如何给 Bricks 的嵌套轮播（nested slider）元素添加进度条，效果参考 SplideJS 官网的轮播进度示例。与其他库不同，SplideJS 显示进度条需要自己写一点自定义 JavaScript。 ## 目录 - DOM 结构

• JavaScript ## DOM 结构 在 Bricks 里搭出下面的结构，类名按下图分配： 注意进度条被包在一个块（Block）元素里（这个块不需要特定类名就能工作）。用这个包裹层给进度条设置背景色： 接下来处理进度条 div 本身。 首先，把宽度设为 0px，并设置想要的高度（示例用 4px）： 然后设置进度条的背景色： 最后加一个顺滑的过渡（transition）： > 相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

JavaScript 把下面这段代码加载到子主题里，或用代码片段插件加载： ```javascript

document.addEventListener(‘DOMContentLoaded’, () => { // Query all the grid sliders on the page const sliders = document.querySelectorAll(‘.sliders-progress-wrapper’); // Stop the function if there is no sync slider if (sliders.length < 1) return; // Debounce function const debounce = (fn, threshold) => { var timeout; threshold = threshold || 200; return function debounced() { clearTimeout(timeout); var args = arguments; var _this = this; function delayed() { fn.apply(_this, args); } timeout = setTimeout(delayed, threshold); }; }; // Init function const init = (bar, sliderId) => { // get the slider instance const instance = bricksData.splideInstances[sliderId]; // Destroy the instance instance.destroy(true); // Change the width of the progress bar when mounted and when the slider moves instance.on(‘mounted move’, function () { const end = instance.Components.Controller.getEnd() + 1; const rate = Math.min((instance.index + 1) / end, 1); bar.style.width = String(100 * rate) + ‘%’; }); // Remount the instance instance.mount(); }; // Loop into each wrapper sliders.forEach(slider => { // Query the progress bar element const bar = slider.querySelector(‘.slider-progress-bar’); // Query the nested slider element const mainSlider = slider.querySelector(‘.slider-main’); // Get the instance ID generated by Bricks const sliderId = mainSlider.dataset.scriptId; // Run the function on load setTimeout(() => { init(bar, sliderId); }, 0); // Rerun the function on resize because bricks reinit the sliders on each resize event window.addEventListener(“resize”, debounce(() => { init(bar, sliderId); }, 300)); }); }); ``` 脚本逻辑：每个 .sliders-progress-wrapper 包裹层里找到进度条（.slider-progress-bar）和轮播本体（.slider-main），通过 mainSlider.dataset.scriptId 拿到 Bricks 生成的实例 ID，销毁后用 instance.on('mounted move', ...) 监听挂载与滑动事件，按 (当前索引 + 1) / 总页数 计算进度百分比并写入进度条宽度；resize 时用 300ms 防抖重新执行（因为 Bricks 每次 resize 都会重初始化轮播）。 一切正常的话，前端就能看到进度条跟随轮播滑动了： ### 参考资料 - https://www.freecodecamp.org/news/javascript-debounce-example/

• https://splidejs.com/tutorials/carousel-progress/

常见误区

几个坑：一是进度条宽度靠监听 slide 事件更新，事件没触发就不同步，确认监听器绑对嵌套轮播的实例；二是进度条元素没设过渡（transition），跳变生硬，加 transition: width 才顺滑；三是移动端进度条太细点不准，给足够高度/可点区域。进度条本质是「当前页/总页数」的视觉映射，逻辑和轮播实例共用同一份状态最稳，别各算各的。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

进度条和轮播不同步？ 确认进度条宽度更新绑在嵌套轮播的 slide 事件上，实例要对应对。

进度条跳变生硬？ 给宽度加 transition，变化才平滑，别瞬切。

移动端点不准？ 给进度条足够高度和可点区域，小屏才好操作。

进度条能点跳转吗？ 能，把点击位置换算成对应页索引，传给轮播实例跳到那一页。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程