Use slider element and present as two rows instead of just one?

[forgelab]

Hi everyone, we’re using the WW slider element. We’ve bound to an array.

Any suggestions about how we can present as two rows that slide in unison, instead of one row (see below)? There must be and I’m guessing we’re missing it

[Kevin]

Hi @forgelab!

With the current slider configuration, this is not easily possible.
However, there is a way with a little javascript.

First, I’ll create a collection, Rick & Morty here, and variable Slider data (Array)

Then, I’ll format the data in my collection, in a page Trigger workflow (Onload)

Here you can see the wokflow i called Format data

This workflow contains just one action change variable value, we’ll format the collection and store this formatted data in our Slider data variable.

Here’s the code used here:

function createBlocks(arr, blockSize) {
  var blocks = [];
  for (var i = 0; i < arr.length; i += blockSize) {
    var block = arr.slice(i, i + blockSize);
    blocks.push(block);
  }
  return blocks;
}

return createBlocks(collections[/* Rick & Morty */ 'f154e682-023e-4d06-895e-0ca3c8aa17c2']?.['data'], 6)

On your side, you’ll need to adapt the function parameters on the return, i.e. the data (collections[/ Rick & Morty / ‘f154e682-023e-4d06-895e-0ca3c8aa17c2’]?.[‘data’] here) and the number of elements per block (6 here).

return createBlocks(your data, block size)

With this, you should get an array of arrays. All you then need to do is bind your slider to Slider data, and, in each slider, bind the current slide container to the sub-array

I hope this helped!

[forgelab]

awesome, thank you @Kevin somehow i missed your reply! i will give it a shot this week and let you know how it goes.