Multiple Refokus sliders on one page

Community resources Webflow Tips
1

Hi,

Recently I needed to build a page containing multiple CMS sliders and ran into the trouble experienced by others: multiple dynamically generated sliders do not work properly on their own. So, I thought somebody might find this solution useful, too…

In my case, the goal was to list all past events from a collection and for each of them, display related comments by participants in a form of a carousel dynamically created based on another, nested collection.

For the CMS slider, I have used the SlickJS variant provided as a courtesy by Refokus.

This is the Webflow structure:

Webflow-structure
Webflow-structure325×608 20 KB

The problem is that all instances of the slider generated in the collection list have the same IDs of the control arrows which causes the script to mishandle them.

The solution is to change these IDs, once the HTML is created, so that they are unique for each carousel on the page. This is enough for Refokus script to identify and handle the control elements correctly.

Here is a little script to include on the page before “/body” tag (and before the Refokus slider-generator script). This script looks for every instance of the slider controls on the page and adds a sequential number to each of them; it also makes the same change in the slider’s attributes used to identify them.

So, your “Before /body tag” custom code (apart from other snippets you may have there) will look like this:

<script>
      // Add sequential number to each instance of an ID "c-prev-arrow" and "c-next-arrow"
      const prevArrows=document.querySelectorAll('div[id="c-prev-arrow"]');
      for(let i = 0; i < prevArrows.length; i++) { 
          prevArrows[i].setAttribute("id", prevArrows[i].getAttribute("id")+i);
      }
      const nextArrows=document.querySelectorAll('div[id="c-next-arrow"]');
      for(let i = 0; i < nextArrows.length; i++) { 
          nextArrows[i].setAttribute("id", nextArrows[i].getAttribute("id")+i);
      }
      // Change accordingly the attributes for each instance of the slider with the attribute "r-slider=1"
      const sliders=document.querySelectorAll('div[r-slider="1"]');
      for(let i = 0; i < sliders.length; i++) { 
          sliders[i].setAttribute("prev-arrow", sliders[i].getAttribute("prev-arrow")+i);
          sliders[i].setAttribute("next-arrow", sliders[i].getAttribute("next-arrow")+i);
      }
</script>

<script src="https://tools.refokus.com/slider-generator/bundle.v1.0.0.js"></script>

Being not a coder myself, unfortunately I can’t provide any further qualified support… :laughing: But hopefully this bit will come handy to someone.
:slightly_smiling_face: