CMS Slider with CMS Load

Attributes
,
1

I am using Collection with CMS load. In that collection I have Multi Image CMS element. Which I am using in Webflow Slider. So I have integrated the CMS Slider there.

Everything is working fine. I have managed to add multiple CMS Slider in single collection by providing the CMS values in the attribute.

Now the main problem I am facing is, when the page load, CMS slider is working. But when I click to load more. CMS slider in new collection items is not working.

Is there any way to call CMS Slider function after the new collection items load?

2

Hey @lissanh95! Could you try this snippet?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.on('renderitems', (renderedItems) => {
        window.fsAttributes.cmsslider.init();
      });
    },
  ]);
</script>

We just init the CMS Slider script when new items are rendered on the page :slight_smile:

3

Thanks Luis for help. Its working now.

1 Like
4

This code is working, but its also deleting the previous sliders.

Screenshot 2024-09-24 at 6.39.04 PM
Screenshot 2024-09-24 at 6.39.04 PM1920×1539 89.4 KB

https://bonnot-paris.webflow.io/realisations

5

Hey @lissanh95! What do you mean by previous sliders? Could you go into more detail or share a quick loom on the issue?

I also noticed you have misplaced the fs-cmsload-mode attribute, this should be on the list, not the load button. Maybe this is causing the issue?

6

Yes, I was talking about previous sliders. here is the loom.

I have moved that attribute to list.
Thanks

7

Hey @lissanh95! Can you please share a read-only link?

8

here is the read-only link:
https://preview.webflow.com/preview/bonnot-paris?utm_medium=preview_link&utm_source=designer&utm_content=bonnot-paris&preview=0c288e9371345f375e21893f03d3ce59&pageId=668ba5c87f43e7dc16cb8c78&locale=en&workflow=preview

9

Thank you! Could you test this snippet? What was happening was that the list element for the previous slider was blank, as we moved the items from the list into the slides. we need to clear the list attribute to not initialize any sliders with an empty list.

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      async function processRenderingQueue() {
        try {
          const result = await listInstance.renderingQueue;
          result.forEach((item) => {
            const element = item.element;
            const sliderList = element.querySelector('.w-dyn-items');
            sliderList.removeAttribute('fs-cmsslider-element');
          });
        } catch (error) {
          console.error('Error processing renderingQueue:', error);
        }
      }

      processRenderingQueue();

      listInstance.on('renderitems', (renderedItems) => {
        window.fsAttributes.cmsslider.init();
        processRenderingQueue();
      });
    },
  ]);
10

Thanks, Its working now.

1 Like