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?
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
Thanks Luis for help. Its working now.
1 Like
This code is working, but its also deleting the previous sliders.
https://bonnot-paris.webflow.io/realisations
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?
Yes, I was talking about previous sliders. here is the loom.
I have moved that attribute to list.
Thanks
Hey @lissanh95! Can you please share a read-only link?
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();
});
},
]);