Repeater field render options

By default, Advanced Views displays the Repeater field row by row, following each subfield type. You can customize the Layout template to change how it's rendered:

1. Grid from Repeater items

You can turn any repeater into Grid, using the CSS grid feature, by adding the following to the CSS code field in the CSS & JS tab of your Layout:

#layout__repeater {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
#layout__repeater {
  grid-template-columns: repeat(2, 1fr);
 }
}

2. Slider from Repeater items

Advanced Views Pro comes with a set of pre-configured JS libraries, so you can easily turn the repeater items into a slider.

After adding the repeater field to the target Layout, change the 'Enable Slider' option to 'Splide v4' and Save. It'll automatically change the field markup to incorporate the necessary classes, and add the default JS instance:

var repeater_inner = this.querySelector('.pro-fields__repeater-inner');
if (repeater_inner) {
	/* https://splidejs.com/guides/options/ */
	new Splide(repeater_inner, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

You can customize it according to your needs, using any available Splide options.

3. Custom Repeater items order

3.1) Picking up a random row

Using the random Twig function, you can pickup a random row:

{% set randomItem = random(repeater.value) %}
{# todo work with the item as usually: randomItem.subfield.value #}

3.2) Custom items sorting

Using the sort Twig filter, you can sort the array by any sub field. The code example below sorts the repeater items by the year sub field in Ascending order:

{% for item in repeater.value|sort((a, b) => a.year <=> b.year) %}
{# todo print item fields #}
{% endfor %}

To turn it into Descending order, just put the b to the left side (and a to the right).