# Repeater (Pro)

The Repeater field type (e.g. [ACF Repeater field](https://wplake.org/blog/how-to-use-and-display-the-acf-repeater-field/)) provides a neat solution for repeating content – think slides, team members, CTA tiles and similar.

{% hint style="info" %}
ACF offers a dedicated field type called Repeater, whereas MetaBox provides the Group field exclusively. However, enabling the 'clonable' setting of the MetaGroup effectively transforms it into a repeater.
{% endhint %}

Repeater acts as a parent to a set of sub fields which can be repeated again and again. What makes this field type so special is its versatility. Any kind of field can be used within a Repeater, and there are no limits to the number of repeats either (Unless defined in the field settings).

## How to use it

**Select** your repeater field *Group*, then select the repeater *Field* from the dropdown.

*Enable Slider*, by **selecting** an optional library from the list.

**Switch** to the *Sub Fields* tab, and assign the Group *sub fields*.

Click on the **Update** button to save your *Layout*. 

**Copy** the shortcode into the post, page or CPT where you want to display the fields.

**Fill** out the fields as required, then click **Publish** or **Update** to save your page or post.

**View** your page to see the result.

## Displaying items as a Grid

<figure><img src="/files/3UFFwTzButqLytU6yH8B" alt=""><figcaption></figcaption></figure>

You can turn any repeater into Grid, using the [CSS grid feature](https://www.w3schools.com/CSS/css_grid.asp), by adding the following to the CSS code field in the CSS & JS tab of your *Layout*:

```css
#view__repeater {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

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

## Displaying items in a Slider

<figure><img src="/files/mDFbhVCwWnJnBd3D5ZrV" alt=""><figcaption></figcaption></figure>

Advanced Views Pro comes with a [set of pre-configured JS libraries](https://docs.advanced-views.com/display-content/front-end-assets-management-pro), 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:&#x20;

```javascript
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](https://splidejs.com/guides/options/).

## Nested repeaters

Advanced Views Pro supports nested repeaters with no restrictions on the depth of nesting. To display a nested repeater, follow these steps:

1. **Create the Parent Layout**:
   * Go to the *Layouts* section and create a new 'Parent' *Layout*.
   * Select the target repeater field in the Fields tab and save the *Layout*.
2. **Create the Child Layout**:
   * Create another *Layout*, this will be the 'Child' *Layout*.
   * In the 'Parent Group' field of this *Layout*, choose the target repeater field that is nested within the Parent Layout and save the *Layout*.
3. **Configure the Parent Layout**:
   * Open the 'Parent' *Layout*.
   * In the repeater field settings of the Parent Layout, select the 'Child' *Layout* you just created from the Field Layout setting and save the Parent Layout.

That’s it! You can now use the 'Parent' *Layout* wherever needed, and it will display both the outer repeater fields and the nested inner repeater. You can further customize the template and add CSS/JS as usual. Note that the 'Child' *Layout* is designated for internal use only and cannot be used directly on pages or posts.

{% hint style="info" %}
To add another depth level, simply repeat the steps outlined above, treating the 'Child' Layout as the new parent for the next level of nesting.
{% endhint %}

This process is also described in the [Display Nested Repeater Fields Guide](/advanced-views/guides/display-nested-repeater-fields.md).

## Advanced usage

### Picking up a random row

Using the [random Twig function](https://twig.symfony.com/doc/3.x/functions/random.html), you can pickup a random row:

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

### Custom items sorting

Using the [sort Twig filter](https://twig.symfony.com/doc/3.x/filters/sort.html), 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:&#x20;

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

{% hint style="info" %}
To turn it into Descending order, just put the **b** to the left side (and **a** to the right).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wplake.gitbook.io/advanced-views/display-content/meta-fields/layout-fields/repeater-pro.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.