NO BUG: Slide initializing very late what is splide waiting ? performance issue or?

Bugs
1

Browser: Chrome 110
OS: Win 10
URL: https://dev.tkay.geopard-digital.com/
Video: vid

very typical setup nothing special

image
image375×860 31.8 KB

there is css easing but that doesnt effect the js init unrelated.


%root%  .splide__list {
transition-timing-function: linear !important;
}

{"content":[{"id":"zzyshs","name":"slider-nested","parent":"xmpjzv","children":["dexbit","sulgjf","wtmcam","erwjkh","telrnw"],"settings":{"height":"66px","perPage":"5","gap":"50","slideAlignVertical":"center","slideAlignHorizontal":"center","_cssCustom":"#brxe-zzyshs img{\n  widtH:auto;\n  max-height:66px\n}\n\n \n/* or */\n\n#brxe-zzyshs  .splide__list {\ntransition-timing-function: linear !important;\n}","autoplay":true,"speed":"8000","interval":"8000","direction":"rtl","perPage:tablet_portrait":"4","perPage:mobile_landscape":"3"},"themeStyles":{}},{"id":"dexbit","name":"block","parent":"zzyshs","children":["trgell"],"settings":{"_alignItems":"center","_justifyContent":"center"},"label":"Slide 1"},{"id":"trgell","name":"image","parent":"dexbit","children":[],"settings":{"image":{"id":207,"filename":"image-33.png","size":"full","full":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-33.png","url":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-33.png"}},"themeStyles":[]},{"id":"sulgjf","name":"block","parent":"zzyshs","children":["lbrcrz"],"settings":{"_alignItems":"center","_justifyContent":"center"},"label":"Slide 1"},{"id":"lbrcrz","name":"image","parent":"sulgjf","children":[],"settings":{"image":{"id":203,"filename":"image-23.png","size":"full","full":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-23.png","url":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-23.png"}},"themeStyles":[]},{"id":"wtmcam","name":"block","parent":"zzyshs","children":["lhamxs"],"settings":{"_alignItems":"center","_justifyContent":"center"},"label":"Slide 1"},{"id":"lhamxs","name":"image","parent":"wtmcam","children":[],"settings":{"image":{"id":205,"filename":"image-35.png","size":"full","full":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-35.png","url":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-35.png"}},"themeStyles":[]},{"id":"erwjkh","name":"block","parent":"zzyshs","children":["yngzdg"],"settings":{"_alignItems":"center","_justifyContent":"center"},"label":"Slide 1"},{"id":"yngzdg","name":"image","parent":"erwjkh","children":[],"settings":{"image":{"id":206,"filename":"image-34.png","size":"full","full":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-34.png","url":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-34.png"}},"themeStyles":[]},{"id":"telrnw","name":"block","parent":"zzyshs","children":["hbsrsl"],"settings":{"_alignItems":"center","_justifyContent":"center"},"label":"Slide 1"},{"id":"hbsrsl","name":"image","parent":"telrnw","children":[],"settings":{"image":{"id":201,"filename":"image-27.png","size":"full","full":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-27.png","url":"https://dev.tkay.geopard-digital.com/wp-content/uploads/2025/02/image-27.png"}},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://dev.tkay.geopard-digital.com","version":"1.12.1","globalClasses":[],"globalElements":[]}

interestingly original splide doesnt have this issue the core splide very performant.

2

Hi Sinan,
Thanks so much for your report!

That’s not the proper way to enable continuous scrolling with Splidejs. You already linked to the auto-scroll extension, which is the appropriate way.

  1. Remove your custom transition
  2. Include the auto scroll extension in your footer scripts and mount it
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll/dist/js/splide-extension-auto-scroll.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    new Splide('.splide').mount(window.splide.Extensions);
});

</script>
  1. Use custom slider options to enable it
{
  "type" : "loop",
  "perPage": 3,
  "autoScroll": {
    "speed": 1
  }
}

Best regards,
timmse

2 Likes
3

ok will test it

thank you

4

@timmse I’ve applied your suggestion for the auto scrolling logos for my homepage but it doesn’t work. Can you please advise?

https://meddbase.stagingcloud.co/

Thanks

5 
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll/dist/js/splide-extension-auto-scroll.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
      var options = {
        autoScroll: {
          speed: 0.5,
        },
      };

      new Splide('#brxe-ttnwwi', options).mount({ AutoScroll: window.splide.Extensions.AutoScroll });
      new Splide('#brxe-mdtqxx', options).mount({ AutoScroll: window.splide.Extensions.AutoScroll });
    });
</script>

check the method 2

you only change the slide id to use it

2 Likes
6

I’m already using Method 2 with same issues, not sure if its something in the settings of the Slider (Nestable) itself.

7

it might be the loading order issue. this script has to load last so it can overwrite the default.

here use this on snippet plugin or fucntions.php…etc


// Frontend Footer Inline JS and CSS,  This will load just before the </body>
function snn_custom_footer_inline() { ?>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll/dist/js/splide-extension-auto-scroll.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
      var options = {
        autoScroll: {
          speed: 0.2,
        },
      };

      new Splide('#brxe-kalozw', options).mount({ AutoScroll: window.splide.Extensions.AutoScroll });
      
      new Splide('#brxe-taaepg', options).mount({ AutoScroll: window.splide.Extensions.AutoScroll });
      
      new Splide('#brxe-vcddge', options).mount({ AutoScroll: window.splide.Extensions.AutoScroll });
    });
</script>
<?php }
add_action('wp_footer', 'snn_custom_footer_inline', 9999);
8

That worked! Thanks @sinanisler :raised_hands:

9

:+1: :sunglasses:

image