Bricks 嵌套滑块做网格轮播：用 SplideJS 扩展实现多行多列

有人问：能不能在 Bricks 的嵌套滑块（nested slider）里做出“多行多列网格”的轮播？SplideJS（Bricks 滑块底层库）正好有个 grid 扩展能搞定。

本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：How to create a grid slider in Bricks

核心思路：SplideJS Grid 扩展

Bricks 的滑块基于 SplideJS。SplideJS 官方提供 @splidejs/splide-extension-grid 扩展，允许在一个 slide 内排多行多列。我们要做的：正常搭嵌套滑块 → 注入 grid 配置 → JS 初始化时挂载扩展。

步骤一：正常搭嵌套滑块

在 Bricks 里按常规建好嵌套滑块，配好你需要的选项（每页数量、循环、箭头等）。

步骤二：注入 grid 配置

通过滑块的自定义选项（或代码）设置网格行列：

"grid":{
     "rows":"2",
     "cols":"4",
     "gap":{
        "row":"1rem",
        "col":"1rem"
    }
}

这表示每张 slide 内排 2 行 × 4 列网格。

步骤三：JS 初始化与 CSS

用 JS 初始化时挂载 grid 扩展，并处理多滑块的防抖：

document.addEventListener('DOMContentLoaded', () => {

   // 选取页面上所有网格滑块
   const sliders = document.querySelectorAll('.grid-slider');

   // 没有则停止
   if (sliders.length < 1) return;

   // 防抖函数
   const debounce = (fn, threshold) => {
      var timeout;
      threshold = threshold || 200;
      return function

配合 CSS 让 slide 内允许换行：

.brxe-slider-nested.grid-slider .splide__slide {
    flex-wrap: wrap;
}

小结

• 嵌套滑块 + SplideJS Grid 扩展 = 多行多列网格轮播
• grid.rows / grid.cols / grid.gap 控制网格密度
• 适合产品墙、案例墙、图片墙类展示

延伸阅读

• Bricks 表单生成器完整指南
• Query Loop 从 API 拉数据

站长

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.

获取报价 →浏览全部教程