Description
Hi there,
I’m having trouble getting multiple instances of a CMS slider to work. In my initial tests, everything worked fine when I manually placed two sliders with the required attributes inside a parent div.
However, now I need the instances to be created automatically within a parent collection list. I’m using the Slug as the identifier and applying it as fs-list-instance="{{Slug}}" on both the parent wrapper and the nested slider inside that same collection item.
What am I doing wrong? Is there a recommended approach for this setup? I really hope this is somehow possible.
Thanks a lot in advance for your support!
Site URL
Hi @andrin.gorgi!
What’s your final design approach? Are you planning to use 7 individual sliders, or what are you trying to achieve with the list instances?
Yes, exactly. I want to have multiple sliders — one for each project. Each slider should be placed inside a modal that opens when its parent project is clicked. The slider should then display the images from the multi-image field of that specific project.
thanks a lot in advance, @Support-Pedro !
Great, this setup can be a bit complex.
Here is an example of how to use instances. You can clone this project to see how it works:
You need to put a slider inside each modal structure
You can make something like this:
<!-- Collection Item -->
<div class="collection-item">
<!-- For each CMS item -->
<div class="project-item" fs-list-instance="{{Slug}}">
<!-- Button to open the modal -->
<a href="#" class="open-modal-btn">Open Gallery</a>
<!-- Modal structure -->
<div class="modal" hidden fs-modal-element="modal" fs-modal-instance="{{Slug}}">
<button class="close-modal-btn" fs-modal-close>×</button>
<!-- Collection List used as dynamic data source -->
<div fs-list-element="list">
<img src="{{multiImageField.url}}" alt="{{multiImageField.alt}}">
</div>
<!-- Webflow Slider to receive CMS items -->
<div class="w-slider" fs-list-element="slider" fs-list-resetix="true">
<div class="w-slider-mask">
<div class="w-slide"></div>
</div>
<div class="w-slider-arrow-left"></div>
<div class="w-slider-arrow-right"></div>
<div class="w-slider-nav"></div>
</div>
</div>
</div>
</div>
Let me know if that works for you!
unfortunately it does not work 
already before your manual i did exactly this structure according to “How to Use Instances” but it doesnt work did yours work?
this is a collection list, right? or is this custom code?
<div fs-list-element="list">
<img src="{{multiImageField.url}}" alt="{{multiImageField.alt}}">
</div>
thank you so much for your help! @Support-Pedro
Hi @andrin.gorgi!
I will try to come up with a solution on my end. I will let you know!
1 Like
Hey @andrin.gorgi! Are you still facing this issue? I see the staging page has been unpublished.
@Support-Luis unfortunately yes. i did not find a solution very looking forward to get one. what do i have to do so you can help me the best? thank you very much!
this is the page now:
@Support-Pedro @Support-Luis could you find something?
i really wonder why these instances dont work and i dont know how to solve this issue. my customer really wants these sliders wich brings me in an unconfortable situation 
hi @Support-Pedro did you find a solution? thanks a lot!!
Hey @andrin.gorgi, apologies for the delay.
It seems that the list elements are not being rendered on the page; this is because none of the collection items have this field turned on. Setting the Visibility to none prevents the element from being rendered on the published page; therefore, we only have one fs-list-element = list on the page, the one that belongs to the header instance.
Could you try turning this conditional visibility off?
i tried, but it didnt work out. also here i tried. here its not in a modal, and never invisible. but still does not work:
could it be that the issue is because its using the slug?
thanks a lot!
I don’t think that is the issue 
I have been debugging and it seems that the elements are not being recognized at all
Adding this to the page’s custom code should return a list of instances
<script>
window.FinsweetAttributes = window.FinsweetAttributes || [];
window.FinsweetAttributes.push([
'list',
(listInstances) => {
console.log('List Successfully loaded!');
const [listInstance] = listInstances;
console.log(listInstances);
},
]);
</script>
But you can see the array is empty
I’ve sent you a DM! Could you check your inbox?
