多页面复用相同Splide Slider故障：第三页滑块失效问题

问题重现 #

首页和关于页使用相同的Splide滑块组件可正常运行，但将相同代码复制到第三页后，滑块完全失效，其余页面滑块功能正常。

代码示例 #

HTML结构 #

<div class="splide my-5 d-flex align-content-center" id="clients">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide pt-3 pb-5 me-3">
        <a class="qcard clientcard">
          <img alt="compony" src="/assets/logo/png.monster-19.png" />
        </a>
      </li>
      <li class="splide__slide pt-3 pb-5 me-3">
        <a class="qcard clientcard">
          <img alt="compony" src="/assets/logo/pngimg.com - google_PNG19644.png" />
        </a>
      </li>
      <li class="splide__slide pt-3 pb-5 me-3">
        <a class="qcard clientcard">
          <img alt="compony" src="/assets/logo/SpaceX_logo_black.svg.png" />
        </a>
      </li>
      <li class="splide__slide pt-3 pb-5 me-3">
        <a class="qcard clientcard">
          <img alt="compony" src="/assets/logo/Star_Wars_Ahsoka_Logo.png" />
        </a>
      </li>
      <li class="splide__slide pt-3 pb-5 me-3">
        <a class="qcard clientcard">
          <img alt="compony" src="/assets/logo/ubisoft-2-logo-png-transparent.png" />
        </a>
      </li>
    </ul>
  </div>
</div>

JS初始化代码 #

$(document).ready(function () {
  new Splide("#clients", {
    type: "loop",
    perPage: 3,
    perMove: 1,
    rewind: false,
    focus: "center",
    pagination: false,
    autoWidth: true,
    breakpoints: {
      530: {
        perPage: 1,
      },
      975: {
        perPage: 2,
      },
      1200: {
        perPage: 3,
      },
    },
  }).mount();
});

排查与解决步骤 #

1. 先查控制台报错 #

打开浏览器开发者工具（F12）切换到Console标签，查看第三页加载时是否有以下类型的错误：

• Splide is not defined：说明第三页未正确引入Splide的JS文件，检查引入路径是否和前两页一致，是否遗漏引入。
• Cannot read properties of null：说明初始化时找不到#clients元素，可能是DOM加载顺序问题，或者HTML结构拼写错误（比如class/id写错）。

2. 统一初始化逻辑（推荐） #

当前代码通过ID#clients初始化滑块，若项目是单页应用（SPA），切换页面时旧的滑块元素未被销毁，新元素无法被选中初始化；即使是传统多页，改用类选择器也能避免ID唯一性潜在问题，同时兼容所有页面的滑块：

修改JS代码为：

$(document).ready(function () {
  // 遍历所有带有splide类的容器，逐个初始化
  document.querySelectorAll('.splide').forEach(el => {
    new Splide(el, {
      type: "loop",
      perPage: 3,
      perMove: 1,
      rewind: false,
      focus: "center",
      pagination: false,
      autoWidth: true,
      breakpoints: {
        530: {
          perPage: 1,
        },
        975: {
          perPage: 2,
        },
        1200: {
          perPage: 3,
        },
      },
    }).mount();
  });
});

3. 检查CSS依赖与冲突 #

• 确认第三页是否引入了Splide的核心CSS文件，比如splide.min.css，缺失CSS会导致滑块布局混乱甚至失效。
• 检查第三页是否有自定义CSS覆盖了Splide的默认样式，比如给.splide__track设置了display: none，或者给.splide__slide设置了异常的宽高，可通过开发者工具的Elements标签对比前两页的滑块元素样式。

4. 动态加载场景处理 #

如果第三页的内容是通过动态切换（比如tab、模态框、路由懒加载）显示的，初始化时滑块容器可能处于隐藏状态，Splide无法正确计算尺寸。此时需要在容器显示后重新初始化：

// 示例：假设第三页的容器ID为third-page，切换显示后初始化滑块
$('#third-page').on('shown.bs.tab', function () {
  new Splide('#clients', { /* 原有配置 */ }).mount();
});

内容的提问来源于stack exchange，提问作者Darigan