Cycle Helpers

Cycles

Cycles alternate through a list of strings and output them in order. Each time cycle is called with a list, the next string in the list is returned.

You can use cycles from within loops to do things like applying a class to every third element.

Liquid Input

{% cycle "Red", "Green", "Blue" %}
{% cycle "Red", "Green", "Blue" %}
{% cycle "Red", "Green", "Blue" %}
{% cycle "Red", "Green", "Blue" %}

HTML Output

Red
Green
Blue
Red

Cycle Groups

Cycles accept an optional "group" parameter to differentiate multiple cycles with the same list of strings.

Liquid Input

{% cycle "group 1": "Red", "Green", "Blue" }
{% cycle "group 1": "Red", "Green", "Blue" }
{% cycle "group 2": "Red", "Green", "Blue" }
{% cycle "group 2": "Red", "Green", "Blue" }

HTML Output

Red
Green
Red
Green