Actualmente estoy trabajando en este sitio web y usando Splide.Js Slider para crear el control deslizante de la imagen de mi producto.

Las diapositivas del control deslizante se rellenan con datos dinámicos de la base de datos de flujo web.

En pocas palabras, si un producto no tiene variaciones, funciona bien, pero cuando un producto tiene algún tipo de variaciones, muestra las imágenes de la variación particular seleccionada, pero la funcionalidad parece tener algún tipo de problema.

No puedo ver dónde está el problema, ya que cambia las imágenes correctamente. Tal vez haya algún tipo de conflicto, pero soy un novato en JS y no puedo hacer una depuración correcta.

Puede ver un ejemplo del producto que no tiene variaciones aquí: https://santo-ecommerce.webflow.io/product/no-sleep-poster

Puede ver el control deslizante roto en el producto con variaciones aquí: https://santo-ecommerce.webflow.io/product/no-sleep-t-shirt

Como referencia, tengo un carrusel que tiene esta estructura HTML:

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

El JS que hace que el control deslizante del control deslizante funcione es este:

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

Si puede ayudarme a encontrar cuál es el problema con el control deslizante en el producto con variaciones, se lo agradeceré enormemente.