How to create a scrollable/slidable repeater to display items from your collections

Show and tell
,
1

The idea here is to add an HTML widget, pass an array to it and create a new div for each item in the array. CSS then does the formatting

I tried making this simple to follow. Let’s not waste your enthusiastic time:

Preview expectations

https://static.wixstatic.com/media/3c2291_eb32605ed3fa47f5af423fe211abd8d3~mv2.gif(image larger than 4 MB)

Setup

  1. Enable dev tools

  2. Add a HTML embed widget to your page

Code

Since the code is long, copy it directly from: Create a scrollable/slidable repeater in your Wix website (lytude.com) and paste each code respectively. If your page already has some code in it, be sure to copy wisely and delete duplicate lines. Else just paste the whole code directly.

Editing the code

Page code

After you’ve replaced, merged or pasted the page source code, be sure to replace:

  1. myCollection → Your collection ID

  2. Html1 → Your HTML widget

HTML embed code
Before you start editing the code, I recommend you copy your code over to Tryit Editor v3.7 (w3schools.com) , This is because the default editing area for the code in Wix is uncomfortably small to edit on. When you’re done you can just copy the whole code back.

After you’ve pasted the HTML embed source code inside your widget or on Tryit Editor v3.7 (w3schools.com) , replace accordingly:

  1. textCollectionId → Your title field ID (Must be of type: Text)

  2. imageCollectionId → Your image field ID (Must be of type: Image, not external links)

  3. textCollectionId → Your subtitle/description field ID (Must be of type: Text)

Since editing this tactical, I will also use an image to show you which texts you’ll need to replace

1920×1080 236 KB

Done

Once all that is done, if you preview or publish your page, you should now be able to interact with the embedded element as a repeater!

Helpful videos

Included in the full article:

  • Referenced field scenario

  • Add buttons (Buttons will be used to navigate)

  • Styling fonts

  • Tutorial video on how you can customize the repeater

Full article - Create a scrollable/slidable repeater in your Wix website (lytude.com)
YouTube - Lytude - YouTube

This took a while for me to put this all together alone so hopefully this helps someone. Show some love

You’re welcome,
DJ bon26

3 Likes
2

Hi, I tried your code but after copying the html code to the widget I get the error message “Whoops, something went wrong. The page you are looking for doesn´t exist or has been moved”