如何修复Splide报错：[splide] 缺少轨道/列表元素

我按照Splide的缩略图轮播教程制作组件时，出现如下报错：

[splide] A track/list element is missing

教程未说明#main-carousel的正确创建方式，尝试多种方法仍无法解决，我的代码如下：

<section id="main-carousel"></section>
<section id="thumbnail-carousel" class="splide">
  <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="img1.jpeg" alt=""></li>
            <li class="splide__slide"><img src="img2.jpeg" alt=""></li>
            <li class="splide__slide"><img src="img3.jpeg" alt=""></li>
            <li class="splide__slide"><img src="img4.jpeg" alt=""></li>
        </ul>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">

<script>
document.addEventListener( 'DOMContentLoaded', function () {
var thumbnails =  new Splide( '#thumbnail-carousel', {
    fixedWidth  : 100,
    fixedHeight : 60,
    gap         : 10,
    rewind      : true,
    pagination  : false,
    isNavigation: true,
    breakpoints : {
      600: {
        fixedWidth : 60,
        fixedHeight: 44,
      },
    },
  } ).mount();

  var main = new Splide('#main-carousel', {
  type      : 'fade',
  rewind    : true,
  pagination: false,
  arrows    : false,
});

main.sync(thumbnails);
main.mount();
thumbnails.mount();

});
</script>

报错原因 #

Splide的轮播组件必须遵循固定结构：容器（带splide类）→ splide__track → splide__list → splide__slide。你的#main-carousel只是空的section标签，完全缺失Splide运行必需的track和list核心结构，因此触发该错误。

修复方案 #

给#main-carousel补全Splide的标准结构，并添加对应数量的主图slide：

修正后的完整代码 #

<!-- 补全main-carousel的Splide标准结构 -->
<section id="main-carousel" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="img1.jpeg" alt=""></li>
      <li class="splide__slide"><img src="img2.jpeg" alt=""></li>
      <li class="splide__slide"><img src="img3.jpeg" alt=""></li>
      <li class="splide__slide"><img src="img4.jpeg" alt=""></li>
    </ul>
  </div>
</section>

<section id="thumbnail-carousel" class="splide">
  <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="img1.jpeg" alt=""></li>
            <li class="splide__slide"><img src="img2.jpeg" alt=""></li>
            <li class="splide__slide"><img src="img3.jpeg" alt=""></li>
            <li class="splide__slide"><img src="img4.jpeg" alt=""></li>
        </ul>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">

<script>
document.addEventListener( 'DOMContentLoaded', function () {
  // 初始化缩略图轮播并挂载
  var thumbnails = new Splide( '#thumbnail-carousel', {
    fixedWidth  : 100,
    fixedHeight : 60,
    gap         : 10,
    rewind      : true,
    pagination  : false,
    isNavigation: true,
    breakpoints : {
      600: {
        fixedWidth : 60,
        fixedHeight: 44,
      },
    },
  } ).mount();

  // 初始化主轮播
  var main = new Splide('#main-carousel', {
    type      : 'fade',
    rewind    : true,
    pagination: false,
    arrows    : false,
  });

  // 同步主轮播与缩略图轮播，只需挂载一次主轮播即可
  main.sync(thumbnails);
  main.mount();
});
</script>

额外优化点 #

原代码中thumbnails.mount()被调用了两次，第一次初始化时已经完成挂载，无需重复调用，修正后已移除重复代码。

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