CMS Slider, multiple instances

Attributes
1

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

2

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?

3

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 !

4

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!

5

unfortunately it does not work :frowning: already before your manual i did exactly this structure according to “How to Use Instances” but it doesnt work :frowning: 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

Bildschirmfoto 2025-06-12 um 12.25.40
Bildschirmfoto 2025-06-12 um 12.25.40636×994 57.7 KB

6

Hi @andrin.gorgi!

I will try to come up with a solution on my end. I will let you know!

1 Like
7

Hey @andrin.gorgi! Are you still facing this issue? I see the staging page has been unpublished.

8

@Support-Luis unfortunately yes. i did not find a solution :frowning: 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: