Ecommerce/CMS Image Slider (multiple on one page)

Design help CMS
1

I have a collection list of products from my CMS. Each product has several images in the “more images” section.

I want each product in the list to have a slider, that will loop through the “more images” within the product.

I’ve tried the following solutions:

  • Finsweet attributes CMS slider (this allows for manual placement of multiple sliders on one page, but not dynamic)
  • Several different JS based CMS slider approaches, each of which only support one slider per page

Does anybody have any advice at all on how I can achieve this?

Here is my public share link: https://preview.webflow.com/preview/goldhouse?utm_medium=preview_link&utm_source=designer&utm_content=goldhouse&preview=2e10f70e9215f2e8901b7c435eec7e87&pageId=62697a144ef6688488bd553d&workflow=preview

2

Hi @Jack_Hayward ,

I am pretty sure Finsweet’s CMS slider should work in this case. What do you mean by “not dynamic”?

3

@avivtech unfortunately it seems that the Finsweet CMS slider requires you to put a specific number to specify that there’s another slider on the page, e.g. fs-cmsslider-element = “list-2”

As mine are all CMS items I can’t specify this number, meaning that I can’t use the Finsweet CMS solution - is there a way around this

4

You are right.

You will have to use some custom JS to add dynamic attributes.
Here’s an example:

<script>

  const lists = document.querySelectorAll('.img-list');
  const sliders = document.querySelectorAll('.slider');

  lists.forEach((list, index) => {
    var curATT = 'list-' + (index + 1);
    list.setAttribute('fs-cmsslider-element', curATT);
  });

  sliders.forEach((slider, index) => {
    var curATT = 'slider-' + (index + 1);
    slider.setAttribute('fs-cmsslider-element', curATT);
  });

</script>

Here is it working:
https://finsweet-cms-cms-sliders.webflow.io/

https://preview.webflow.com/preview/finsweet-cms-cms-sliders?utm_medium=preview_link&utm_source=designer&utm_content=finsweet-cms-cms-sliders&preview=b869a03b4ca5b59c1afdf77fdd402df8&workflow=preview

2 Likes
5

Hey @avivtech,

This is excellent, thank you very much!

1 Like
6

This is exactly what I needed, and it worked like a charm.
Thank you!

7

I’m now trying to do something similar but with Finsweet’s CMS NEST attributes. The second part (the identifier is “stays”) is not working, are you able to help @avivtech ?

<script>

  const lists = document.querySelectorAll('.sl-home_list');
  const stays = document.querySelectorAll('.sl-identifier');

  lists.forEach((list, index) => {
    var curATT = 'list-' + (index + 1);
    list.setAttribute('fs-cmsnest-element', curATT);
  });
  
	stays.forEach((stay, index) => {
    var curATT = 'stay-' + (index + 1);
   	stay.setAttribute('fs-cmsnest-collection', curATT);
  });
  


</script>