5 min read

How to make Finsweet CMS Slider and CMS Tabs work on nested collections

How to Insert Image into Webflow CMS and Keep the SEO Perfomance

‍

Ever tried to make Finsweet's CMS Slider or CMS Tabs work on nested collections (e.g. multi-image reference), only to find out it doesn't? Well, look no further, because in this article I will show you how to make them both work flawlessly.

In this tutorial, I'm assuming that you already have your page ready according to Finsweet's documentation, and that you're only looking for a solution to nested collection problem. If not, please set up your page as described in the docs and then come back to this tutorial.

‍

Finsweet CMS Tabs on nested collection

See live example, study a read-only link, or clone this project

‍

Let's implement it in Webflow

Start by adding this code into <head> tag of your page, just like the docs say

<!-- [Attributes by Finsweet] CMS Tabs -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmstabs@1/cmstabs.js"></script>

Add a class called cms-list to the collection list that's supposed to populate the tabs. Meaning it should be the nested collection list. Don't apply this class to any other element on the page

Nested collection list with class 'cms-list'

Add a class called cms-tabs to the tabs element. Again, don't apply this class to any other element on the page.

Webflow tab element with class 'cms-tabs'

Next, add a class called cms-tab-link to the div block or text block to be the element inside tab link. This element will be dynamically added as the Tab Link. In designer, it should be located inside collection item of the nested collection. Once again, no other element on the page can have this class.

Screenshot of element with 'cms-tab-link' class and its hierarchy

Finally, paste this code before </body> tag of your page

<script>
const cmsList = document.getElementsByClassName('cms-list');
const cmsTabs = document.getElementsByClassName('cms-tabs');
const cmsTabLink = document.getElementsByClassName('cms-tab-link');

for(let i = 0; i < cmsList.length; i++){
cmsList[i].setAttribute("fs-cmstabs-element", `list-${i+2}`);
cmsTabs[i].setAttribute("fs-cmstabs-element", `tabs-${i+2}`);
cmsTabLink[i].setAttribute("fs-cmstabs-element", `tab-link-${i+2}`);}
</script>

Publish. This solution only works on published website.

‍

Finsweet CMS Slider on nested collection

Preview live example, get a read-only, or clone this project

‍

How to make it work in Webflow

First, paste this code inside <head> tag of your page, just like the docs say

<!-- [Attributes by Finsweet] CMS Slider -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>

Add a class cms-slider to your slider. Don't apply this class to any other element on the page

Screenshot of slider element with class 'cms-slider'

Add a class cms-list to your nested collection list (the list that is supposed to populate the slider). Once again, don't apply this class to any other element on the page

Screenshot of nested CMS list with class 'cms-list'

Lastly, paste this code before </body> tag of your page

<script>
const cmsList = document.getElementsByClassName('cms-list');
const cmsSlider = document.getElementsByClassName('cms-slider');

for(let i = 0; i < cmsList.length; i++){
cmsList[i].setAttribute("fs-cmsslider-element", `list-${i+2}`);
cmsSlider[i].setAttribute("fs-cmsslider-element", `slider-${i+2}`);}
</script>

Publish the website. This solution won't work in preview mode

If you want to use different class names for your sliders, tabs, or collection list, you can do that. If you do, don't forget to also change them in the first two or three lines of before </body> tag <script>, to match with your new class names.

Screenshot of code with highlighted class names to change

‍

Disclaimer: You do not need to add custom atrributes to sliders, tabs, and collection lists in Webflow. The script will do that for you. If you do add them, this solution will still work.

‍

Why don't attributes work on nested collection natively?

If you take a closer look at Finsweet's documentation, you always have the option "I want to have more than one instance of X on the same page".

To make it work, every instance of the solution must have unique attribute (or pair of attributes) applied. However, when you apply some custom attribute to a collection item, all collection items will have the same one, meaning only one will work. So to give every instance unique pair of attributes (like "slider-2", "slider-3"...) this custom code will grab all of the collection items, based on their class name, loop through them one by one, and give each one a unique attribute.

‍

Troubleshooting

‍

Spelling errors

First things first, go through all class names and make sure they match exactly with class names in your before </body> code. Keep in mind that class names in css are case insensitive and cannot contain spaces. This mean that a class named 'Blog Collection List' in Webflow, needs to be referred to as 'blog-collection-list' in custom code.

‍

Custom classes on wrong elements

If this solution still isn't working, then go back into designer and make sure that the custom classed we added, like cms-slider, cms-list, cms-tab-link etc, are applied to the correct element.

Also double-check that they are not applied to any other element on the page.

‍

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Website pre-launch checklist

69 steps pre-launch checklist is the most complex checklist developed by years of experience in Karpi Studio.

You will find how to test and fix:
- loading speed issues,
- responsivity issues on all current devices,
- SEO issues,
- and many more.

€30 Now: €9.00

Check it now