odd / even Cycle in SHOPIFY

{% cycle %}  tag Description : 

Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time cycle is called, the next string that was passed as a parameter is output.
cycle must be used within a for loop block.

Input

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

Suppose you have multiple collection of Block and you want to have different design for Odd and even collection, Row Design is attached below
  

Collection 1 (odd)	Collection 2 (even)
Collection 3 (odd)	Collection 4 (even)

 

So for this kind of design you are going to have 2 snippets  i.e. One for odd and another for even
<div class="container {% cycle 'odd','even' %}">
 {% assign mod = forloop.index | modulo: 2 %}
                    {%if mod == 0 %}
                        // attach snippet of even collection here
                        even - right side
                    {%else%}

// attach snippet of odd collection here

                        odd - left side
                    {%endif%}
</div>

So, You don’t have to apply any js for it, As we have used cycle beside container class, you gonna have class odd and even alternatively and apply css according to that class

Stay updated

Thanks