List Nest and List Slider (Attributes v2) Conflict: Parent Collection List Appearing as Slide

Attributes
, ,
1

I’m trying to use both List Nest and List Slider (Attributes v2) on the same page.

I saw the old v1 solution (using fsAttributes.push and a callback to control the order), but I can’t find a working code example for v2.

When both solutions are on the same page, the Collection List that holds the nested collection shows up as a visible slide in the slider, instead of just displaying the nested content.

Is there a correct way to set this up in v2?

2

Hey @etienne!
I see what’s happening with your List Nest and List Slider v2 setup. When both solutions are on the same page, they can conflict if they’re not properly scoped with unique instances, which causes the parent Collection List to be misinterpreted as slider content.

The issue occurs because both List solutions are reading the same Collection List element without proper instance separation. In v2, unlike v1’s callback approach, you need to use fs-list-instance attributes to prevent conflicts between different list functionalities.

Here’s how to fix it:
Add unique instances to separate the functionalities:
For your List Nest setup (parent collection):

<!-- Parent Collection List -->
<div fs-list-element="list" fs-list-instance="parent-collection">
  <!-- Collection Items -->
  <div fs-list-element="item">
    <div fs-list-element="nest-target" fs-list-nest="nested-content"></div>
    <a fs-list-element="item-link" href="[Current Page]">Link</a>
  </div>
</div>

For your List Slider setup (the nested content):

<!-- On the Collection Template Page -->
<div fs-list-element="list" fs-list-instance="slider-content">
  <!-- This becomes the slider content -->
</div>

<!-- Slider element on the static page -->
<div fs-list-element="slider" fs-list-instance="slider-content"></div>

Make sure to:

  • Use fs-list-instance="parent-collection" for the parent collection
  • Use fs-list-instance="slider-content" for slider functionality
  • Never use the same instance identifier for both

In v2, this is the API Reference.

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'ATTRIBUTE_KEY', // 'list', 'copyclip', 'modal', etc.
  (result) => {
    // Your code goes here.
  },
]);

API Info Here

Could you try implementing these instance separations and let me know how it goes? If you’re still having issues, please share your Webflow staging URL or a quick Loom video showing the current behavior so we can help further.

@Support-Luis or @Support-Pedro can help if you need more assistance with custom code solutions.