I'm currently working on this website and using Splide.Js Slider to create my product image slider.

The slider slides is populated with dynamic data from the webflow database.

Long story short, if a product has no variations it works fine but when a product has some sort of variations, it shows the images of the particular variation selected but the functionality seems to have some kind of problem.

I can't see where is the problem as it changes the images correctly. Maybe there is some sort of conflict but I'm a newbie in JS and can't make a correct debug of it.

You can see an example of the product that has no variations here: https://santo-ecommerce.webflow.io/product/no-sleep-poster

You can see the broken slider in the product with variations here: https://santo-ecommerce.webflow.io/product/no-sleep-t-shirt

For reference I've a carousel that has this HTML structure:

<section class="splide slider2" aria-label="Basic Structure Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

The JS that make the splider slider work is this:

<script>
function slider2() {

let splides = $('.slider2');
for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
    new Splide( splides[ i ], {
  // Desktop on down
    perPage: 1,
    perMove: 1,
  focus: 'center', // 0 = left and 'center' = center
  type: 'loop', // 'loop' or 'slide'
  gap: '4em', // space between slides
  arrows: 'slider', // 'slider' or false
  pagination: 'slider', // 'slider' or false
  speed : 550, // transition speed in miliseconds
  dragAngleThreshold: 80, // default is 30
  autoWidth: false, // for cards with differing widths
  rewind : false, // go back to beginning when reach end
  rewindSpeed : 800,
  waitForTransition : false,
  updateOnMove : true,
  trimSpace: false,
  breakpoints: {
        991: {
        // Tablet
            perPage: 3,
      gap: '4vw',
        },
    767: {
        // Mobile Landscape
            perPage: 1,
      gap: '4vw',
        },
    479: {
        // Mobile Portrait
            perPage: 1,
      gap: '4vw',
        }
    }
} ).mount();
}

}
slider2();

</script>

If you can help me find what's the issue with the slider in the product with variations I will be extremely grateful.