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: