如何正确添加 Splide Grid 扩展插件_网络技术_宿州市腾雀网络科技有限公司

如何正确添加 Splide Grid 扩展插件

发布时间 - 2026-01-21 00:00:00 点击率：次

splide grid 扩展需通过 `window.splide.extensions` 而非 `window.splide.grid` 挂载，且必须确保 grid 插件脚本已正确加载、配置项结构符合 v4+ 规范（如使用 `rows/cols` 替代旧版 `dimensions`）。

在 Splide v4 及更高版本中，Grid 扩展的挂载方式已发生重要变更：不再支持直接挂载 window.splide.Grid，而必须统一通过 window.splide.Extensions 对象注册所有官方扩展。这是导致你代码中 Grid 未生效的根本原因。

✅ 正确集成步骤

引入必要资源（按顺序）：

初始化时挂载 Extensions（关键！）：

jQuery(function($) {
  const splide = new Splide('#exmpale-slick', {
    type: 'loop',
    height: '20rem',
    gap: '1em',
    perPage: 2,
    perMove: 1,
    // ✅ Grid 配置：v4+ 推荐使用 rows/cols + gap（更语义化）
    grid: {
      rows: 2,
      cols: 2,
      gap: {
        row: '1em',
        col: '1em'
      }
    },
    breakpoints: {
      600: {
        height: '10rem',
        perPage: 1,
        grid: {
          rows: 1,
          cols: 1,
          gap: {
            row: '.5em',
            col: '.5em'
          }
        }
      }
    }
  });

  // ✅ 正确挂载方式：传入 window.splide.Extensions
  splide.mount(window.splide.Extensions);
});

⚠️ 注意事项

dimensions 已弃用：旧文档中使用的 dimensions: [[2, 0.5], [2, 2], ...] 是 v3 语法，v4+ 中已被 rows / cols 取代。混合使用会导致 Grid 不渲染。
HTML 结构无需额外 class：Splide Grid 会自动为 .splide__slide 元素添加网格布局样式（display: grid 等），请确保 .splide__list 下直接是
，你的 HTML 符合要求。
避免重复引入或 CDN 版本不匹配：检查浏览器控制台是否报错 Splide is not defined 或 Grid is not a constructor —— 这通常意味着 splide-extension-grid.min.js 加载失败或版本与 Splide 主库不兼容（推荐使用 CDNJS 或 jsDelivr 的明确版本号）。

jQuery 非必需：若项目无其他

jQuery 依赖，建议改用原生写法，避免潜在冲突：

document.addEventListener('DOMContentLoaded', () => {
  const splide = new Splide('#exmpale-slick', { /* config */ });
  splide.mount(window.splide.Extensions);
});

✅ 验证是否成功

初始化后，检查 DOM 中 .splide__slide 元素是否被自动添加了 data-splide-grid-row 和 data-splide-grid-col 属性，并在开发者工具中观察其 CSS display 是否变为 grid —— 若两者均存在，即表示 Grid 扩展已激活。

遵循以上规范，你的 Splide 轮播图将正确呈现响应式网格布局，无需任何额外 CSS 干预。

# css # jquery # html # js # npm # 浏览器 # 工具 # win # cdn # .net # class

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：将嵌套元组结构解析为包含区间对的列表

下一篇：Python 字符串为什么是不可变的？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：将嵌套元组结构解析为包含区间对的列表

下一篇：Python 字符串为什么是不可变的？