im following this guide to create thumbnail carousel but for some reason im getting error.

In the guide they didnt say how to create #main-carousel so i try few different ways but still cant make it work

[splide] A track/list element is missing

any ideas how to fix this or why this is happen ?

here is my code:

    <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="/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="/@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();
    
    });

im following this guide to create thumbnail carousel but for some reason im getting error.

In the guide they didnt say how to create #main-carousel so i try few different ways but still cant make it work

[splide] A track/list element is missing

any ideas how to fix this or why this is happen ?

here is my code:

    <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/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/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();
    
    });

• javascript
• html
• splidejs

2 Answers 2

after long resurch i found

[splide] A track/list element is missing

is mean splide__track and splide__list classes are missing for current splide

To fix the issue i should create two identical html splide`s with different IDs

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

P.S. if someone from splide team read this please add additional information how should be created main carousel in this guide

I had the same error, and I resolved it by following the structure outlined in the documentation. For example:

html:

<div class="anotherSplide">
  <div class="splide__track">
    <ul class="splide__list">
    
      <li class="splide__slide">
        <div> item </div>
      </li>

      <li class="splide__slide">
        <div> item </div>
      </li>

    </ul>
  </div>
</div>

JS:

new Splide('.anotherSplide', {
    // code here
});

This did not work for me. Instead, I had to use the following HTML:

<div class="splide anotherSplide">
  <div class="splide__track">
    <ul class="splide__list">
    
      <li class="splide__slide">
        <div> item </div>
      </li>

      <li class="splide__slide">
        <div> item </div>
      </li>

    </ul>
  </div>
</div>

JS:

new Splide('.splide.anotherSplide', {
    // code here
});

Hope this helps!