Uncaught Error: [splide] A track/list element is missing.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v3.2.2

Description

Hi,

I was working with a splide slider and everything worked just fine for the first days. But then after a few days working fine, the slider at once didn’t display anymore and i got this error in the console: Uncaught Error: [splide] A track/list element is missing.

I didn’t consciously change anything to the slider or the code. I checked the code and classnames again for typo’s but everything seems fine by me, so I really don’t understand where this comes from…

HTML of the splide section: `<div class="container"> <div id="w-node-_696677fc-83e5-da5d-8a12-def325c534fe-118f0f63" class="splide slider1"> <div class="splide__track"> <div id="w-node-_696677fc-83e5-da5d-8a12-def325c53500-118f0f63" class="splide__list"> <div class="splide__slide"></div> <div class="splide__slide"></div> <div class="splide__slide"></div> <div class="splide__slide"></div> </div> </div> </div>

</div> `

The code in my head: `

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.2.2/dist/css/splide-core.min.css"> <style> .splide__track{ overflow: visible; } .splide button:disabled { opacity: 0; } .splide__slide.is-active{ box-shadow: 1px 1px 80px 8px rgb(0 0 0 / 4%); } .hero-pag-num > .w-active{ /*trying with in-slide numbers first*/ } </style>

`

The code before the closing body tag: `

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.2.2/dist/js/splide.min.js"></script> <script> function slider1() { console.log('custom code slider1'); let splides = $('.slider1'); for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) { new Splide( splides[ i ], { // Desktop on down perPage: 2, perMove: 1, focus: 0, // 0 = left and 'center' = center type: 'slide', // 'loop' or 'slide' gap: '30px', // space between slides arrows: 'slider', // 'slider' or false pagination: false, // 'slider' or false speed : 600, // transition speed in miliseconds dragAngleThreshold: 60, // default is 30 autoWidth: false, // for cards with differing widths rewind : false, // go back to beginning when reach end rewindSpeed : 400, waitForTransition : false, updateOnMove : true, trimSpace: false, // true removes empty space from end of list breakpoints: { 991: { // Tablet perPage: 2, gap: '20px', }, 767: { // Mobile Landscape perPage: 1, gap: '15px', }, 479: { // Mobile Portrait perPage: 1, gap: '10px', } } }).mount(); } } slider1(); </script>

` It is made in webflow. The slider should be under the events title: https://ivtg-annual-report-2021.webflow.io/#events

Does anyone know why I get this error and why the slider doesn’t display anymore? I really don’t understand or find it. Already so much thanks for your time to look into my problem! Robbe

Reproduction Link

No response

Steps to Reproduce

I don’t really know how i produced this bug, it was working all fine and without any conscious changes it stopped working. The error I get doesn’t seem to indicate the problem for me because the splide classes stayed the same.

Expected Behaviour

A nice slider 😃

[jidrone]

It happened to me with the version 4 so I couldn’t upgrade, I reviewed my code and my identifier only exists one time and I have all the options as suggested in the upgrade documentation.

Here is my code:

// Slider Options.
const mainSlider = new Splide(exhibitField.querySelector('.main-slider'), {
  rewind: true,
  video: {
    loop: true,
    youtube: {
      rel: 0
    }
  },
  pagination: false,
  arrows: true
});
// Thumbnails Options.
const thumbnails = new Splide(exhibitField.querySelector('.thumbs-slider'), {
  fixedWidth: 100,
  fixedHeight: 75,
  rewind: true,
  isNavigation: true,
  gap: 10,
  pagination: false,
  cover: true,
  focus: 'center',
  arrows: false,
  dragMinThreshold: {
    mouse: 4,
    touch: 10,
  }
});

[robbe-nees]

Yes NaotoshiFujita!

Indeed, I had another -not splide related- slider on the page that I accidentally gave the slider1 class too. I was so splide focussed that I completly looked over that! I changed the class and it indeed works again as expected.

Thank you so much for your help! 🙏