Skip to content

cycle

Cycle between a list of values and output each value one at a time for each time the cycle tag has been called.

liquid
{% cycle first_value, second_value %}
  • first_value: Outputted value when cycle is called for the first time.
  • second_value: Outputted value when cycle is called for the second time.

First example:

liquid
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}

Output

html
one
two

Second example:

liquid
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}

Output

html
one
two
three
one

Named cycles

The cycle tag will always default to a default name when no name is specified, let's call that name default. This is crucial to how this tag functions, a cycle is identified by the content it's cycling through and the name.

In cases where we want to have multiple parallel cycles that are both going through the same items without one interfering with the other, we'll have to explicitly set a name for the cycles in order to identify each cycle scope.

liquid
{% cycle name: first_value, second_value %}
  • name: Unique cycle name, to identify the iteration of each cycle.
  • first_value: Outputted value when cycle is called for the first time.
  • second_value: Outputted value when cycle is called for the second time.

Example:

liquid
{% cycle 1: 'one', 'two', 'three' %}
{% cycle 2: 'one', 'two', 'three' %}
{% cycle 1: 'one', 'two', 'three' %}
{% cycle 2: 'one', 'two', 'three' %}

Output

html
one
one
two
two

Use within a loop

It's possible to use a cycle within a loop (that includes both default and named ones) and expect the same result like what you'd be seeing if the tag was used outside a loop.

Example:

liquid
{% for index in (1..4) %}
  {% cycle 'one', 'two', 'three' %}
{% endfor %}

Output

html
one
two
three
one