Repeater with color alternation?

Ask the community
,
1 
Hello, I have a repeater in list form on my website.

I am looking for a way to be able to display the content of my repeater by alternating between 2 colors.

I would like to know if anyone has managed to do this or if a post about this method already exists

The ID of my elements are :

Repeater : #walletRepeater
Item of Repeater : #walletItem

The colors I would like to use :

#FFFFFF
#F8F8F8

I thank in advance the person who can help me, because I am a little stuck with this
2

@scarecroow The built-in container in a repeater does not allow for alternating the background color through code. The only way to achieve anything like that is to have a background image that you alternate.

However, what you can do is insert a box on the page, set it’s dimensions to be a couple pixels less wide and tall than the repeater item (row), and then drag and drop the box so that it attaches to the repeater. Then place any elements you have in that box. With the container box, you will be able to alternate the colors, more or less like this:

$w.onReady(function () {
    $w("#repeater2").onItemReady(($item, itemData, index) => {
        $item("#box1").style.backgroundColor = (index % 2) ? "#FFFFFF":"#F8F8F8";  
    })
});
3

Thank you very much for your answer, I will try :smiley:

Indeed, it must be possible to put a second repeater below in the background, I don’t know if that’s what you’re referring to…?

I could then configure it in the same way as the walletrepeater so that the display is identical to the levels of dimensions and interactions… I’ll try.

4

@scarecroow If you’re wondering about inserting a repeater in a repeater, that is not supported, though it has been requested of the Wix development team.

So I’m clear about what I mean above, the only reason to initially insert the box on the page is because you will want to re-size it first so the dimensions fit the repeater row appropriately. Once you have that done, remove any elements you might already have in the repeater, and drag and drop the box onto the repeater item. Then if you had removed any items, add them back into the container box. Make sense?