How to change the order of the items in every second row in a repeater?

Ask the community
, ,
1

Question:
How to change the order of the items in every second row in a repeater to reproduce this element in this site? https://www.yogamela.org/lineup/

Product:
Wix Studio

What have you already tried:
I tried the following code, it can access the right elements, and change for example the color, but it does not change the order of the item.

$w.onReady(function () {
	// Write your Javascript code here using the Velo framework API

	// Call functions on page elements, e.g.:
    $w("#repeater16").onItemReady(($item, itemData, index) => {
		const repeater = $w("#repeater16");
		console.log(repeater);
        
        if ((index + 1) % 4 === 0 || (index + 2) % 4 === 0){
            const element1 = $item('#box214'); const element2 = $item('#imageX82');
			const parentElement = element1.parent; 
			console.log(index);
			console.log(element1);
			console.log(element2);
			
			// sadly this line does not work how to fix?
			parentElement.customClassList.add('containeri');

			element1.customClassList.add('testi');
			element2.customClassList.add('testii');
			//console.log(element1.classList);
	
            // Swap the positions
           // element1.after(element2); // Move element2 to before element1
            //parentElement[1].after(element1); // Move element1 to before element2
        }
   
	});
});

.containeri { display: flex; flex-direction: column; /* Adjust this if you want row layout */ }

.testi {
    background-color: pink;
    order: -1;
}
.testii {
    background-color: pink;
    order: 1;
}
2

Many ways to achieve that, if moving the elements didn’t work
You can duplicate the items and collapse the right state depends on the index

So you have 2 images in each repeater item, one on the right and one on the left, and you only show one of those

3

Thx i will try that. By the way do you know how to set the css class of the surrounding container?

Sadly the parentElement from above code wont allow to add a class, there must be a other way…
parentElement.customClassList.add(‘containeri’);