Как исправить: [splide] Отсутствует элемент дорожки/списка

Я следую этому руководству, чтобы создать карусель миниатюр, но по какой-то причине я получаю сообщение об ошибке.

В руководстве не сказано, как создать #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/[email protected]/dist/js/splide.min.js"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/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();
    
    });