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

Question

我按照本指南创建缩略图轮播，但由于某种原因我收到错误。

在指南中，他们没有说如何创建#main-carousel，所以我尝试了几种不同的方法，但仍然无法使其工作

[splide] A track/list element is missing

有什么想法如何解决这个问题或者为什么会发生这种情况？

这是我的代码：

    <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">


    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();
    
    });

Answer 1

经过长时间的研究我发现

[splide] A track/list element is missing

是指当前 splide 缺少 splide__track 和 splide__list 类

要解决此问题，我应该创建两个具有不同 ID 的相同 html 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>

PS，如果 splide 团队的有人阅读了本文，请添加其他信息，如何在本指南中创建主轮播