Create a scrollable/slidable repeater in your Wix website

Hi, today I will show you how to create scrollable repeaters in wix.com. Since this feature is yet to be available, there's a work around to this. This is useful when you want to display a lot of items from different collections, it makes it more comfortable with less top-to-bottom scrolling for your user.

Preview expectations:

Source codes:

Html emded code:

Page code:

Getting started

Assuming you have your collection ready, it's time to start adding elements to your page. First and only thing you need to add is an HTML widget element to your page.

Add > Embed > Custom Embed > Embed a widget

Now that you have the element added to your page, it's time for you to copy the Page code to your page code (After copying to your page code, you can then delete duplicate codes like lets say you already imported wixData, you can delete the other one). Replace the myCollection with your collection ID and the html1 with your HTML widget element ID.

After pasting the page code, the next step is basic, its now time to copy all HTML embed code and paste inside your HTML widget element.

Replacing IDs

If you've been using Wix for a while, this part should really be a piece-of-cake. What you will be doing is replacing the IDs in the code with the IDs in your collection to basically connect and display the content on your page.

Imagine we had a collection that looked like this (Ignore the content):

And what we want to show in the repeater are Title, Cover photo, and Subtitle. So, we would have to change the IDs in the HTML widget code to match the IDs in our collection as so (Since editing the code in the Wix editor is kind of hard, I recommend going to W3schools.com, and editing your code over there. when you're done you can simply copy it back).

Title

Firstly we'll be changing the ID for the title

Image

Nextly, we would be changing the ID for the Cover photo. This type of file must be stored in an Image type field, and it must be from Wix static and not an external link or else you will be displaying a blank image since the src was not found. You shouldn't receive any errors though.

Subtitle

Now its time to replace the ID of the last piece

Done

Now that we are done connecting our elements to data, if you preview the page or view the page on your life site, you should see that everything should have worked exactly as you would have imagined.

Other cases

Referenced fields

If you have a referenced field that you would like to display in your repeater but it displaying as undefined this can because while you were querying the data you passed, you didn't include that reference field. To include a referenced field, you'll need to add a .include() function anywhere before/above the .find() function in the page code. It should look something like this:

wixData.query("myCollection")
    .include("referencedFieldId")
    .limit(15)
    .find()
    .then((results) => {
        let array = results.items.concat(results.items) //just duplicating items to make it longer
        $w('#html1').postMessage({
            "currentUserId": wixUsers.currentUser.id,
            "shuffledData": shuffle(array),
            "data": array,
        })
    })
$w('#html1').onMessage((event) => {
    let item = event.data.item
    let location = `/classes/${item._id}`
    wixLocation.to(location)
})

Another reason why it could be returning as undefined is because you might have mistyped the ID or put in the ID for another field that's not a readable format. For example, if you put in an ID for an Array field to a text element, it will return undefined

Changing theme

If the style of the repeater display does not match your website theme as much as you wanted, you can always go in the code and edit the CSS that is displayed. I advise editing this code only if you're familiar html and CSS. If you want to change the font on your text elements to match your website theme font in Wix, visit this link to access fonts in some major used fonts. If yours isn't mentioned you can try looking for the web font on the internet. If you still can't find your fonts on the web, it is probably because it is licensed and Wix only has it because Wix paid for it.

Adding Button (Click by button)

Buttons on repeaters has the classic look of displaying items to your visitors, it's a more direct way of telling your visitors where to click. Here is the code that has a button on it:

Replace this to change the label:

To style the button, edit the .button inside the <style> tag

You can go on ahead and customize this even more to your liking. If you aren't familiar with HTML, I recommend you don't edit much in the <script> tag because things can get real confusing and errors will happen if you don't know what you're doing.

With this and a little knowledge of html, you will now have successfully created a custom slidable repeater in your Wix website

Tutorial videos