Finsweet Attributes List Load Not Loading Entire List of 130+ Items With Render All

Attributes
1

Hi, I have a SPLIDE slider that should display 130+ records from clients CMS, and only 100 are being populated as per Webflow’s limitation. I installed the Finsweet List Load with render all, followed all the instructions, and not showing over 100 items.

See it here: https://acumen-04d9a1-ca20465950ba56e0134793fda.webflow.io/ (scroll down to the client slider instance above the map).

Here is my read only: Webflow - Acumen

I have tried removing the SPLIDE calls & code and just outputting the collection images with List Load as in the demo in case that was causing issue but it didn’t make any difference. Also added the cloneable Attributes List Load into Webflow and recreated the Splide and client logo CMS table there and it works as it should, so I don’t think it is Splide but not sure what I am missing.

Your help is very appreciated as I have a client deadline on this working, thank you!

~ Heather

2

Hi @heather!,

I apologize for the delay,

I took a look at your page and with some code I found out that there are 341 elements loaded with List Load, so it seems to be working fine.

Did you managed to resolve the issue? If not, Could you share a quick loom video?, I might be missing something.
Thanks.

3

Hi thanks for the response. I also figured out that it is loading correctly, but with the SPLIDE it is only loading the 100 x 3 for the cloning of the scroll. I was looking at the API information, could I use the afterRender on the List object to run the splide call after the list load with “listInstance.addHook(‘afterRender’, (items) => {”? If so could you help with how I need to incorporate that into the code below please?

window.FinsweetAttributes ||= ;
window.FinsweetAttributes.push([
‘list’,
(listInstances) => {
//HELP WITH HOOK AFTER RENDER CODE HERE
// SPLIDE CALL HERE
},
]);

Thank you!!

4

Hi @heather!

Yesss, you’re on the right track.

It could be something like this:

window.FinsweetAttributes = window.FinsweetAttributes || [];
window.FinsweetAttributes.push([
  'list',
  (listInstances) => {
    const [listInstance] = listInstances;

    listInstance.addHook('afterRender', (items) => {
      // Initialize Splide here
      new Splide('.splide', {
        type: 'loop',
        perPage: 3,
        // Add other Splide options as needed
      }).mount();
    });
  },
]);

Let me know how it goes!

5

It worked!! Thank you for the assistance :grinning_face:

1 Like