Display Set Number of Random List Items on Refresh

I have only just come to realise that Webflow’s option to “Random sort, Shuffle” option doesn’t really do what it advertises.

The order is randomised, but this then appears the same to all users and refreshes once every 12 hours.

What I need to achieve is a truly random order, every time a user refreshes the page, of a set number of items (in this case, cards that the user will reveal).

If anyone could lend a hand or point me in the right direction, that would be greatly appreciated. I have already dug through the forums and found various topics but nothing specific to what I’m looking for (with a set number of items that need to display).

Thanks in advance…


Live Site

Preview Link

Custom code required. Two ways that come to mind for me:

  1. You would have to have a collection list that was hidden with CSS on the page (display:none). Then you would create a javascript array using the list as the source, then use a function to return a random item and setting its display to block.

  2. If you don’t want all the cards to load on the page, you could create an array using the URL value of the collection items, then randomize that array as above, just loading the card html content via Ajax into an element.

Both these approaches would render a new value on page load.

If you can’t code you could always post to the freelance category for assistance.

Thank you for the insight Jeff.