how to display two image vertical slider in shopify product page

Question

it shows only even image in slider odd images are hidden 0

I've assigned a variable in liquid and made odd and even classes I need one even and one odd in the image block class

was looking for the syntax on Google/Shopify cheatsheet/liquid Github wiki and can't seem to find anything that works

is this possible?

i was trying

  {% for media in product.media %}
  {% assign mod = forloop.index | modulo: 2  %}
  <div class="image-block">
    {%if mod == 0 %}

    <div class="even">
      <a  href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
         class=" product-single__thumbnail--{{ section.id }} even count-{{forloop.index}}"
         data-thumbnail-id="{{ section.id }}-{{ media.id }}">  <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: 'large', scale: 2 }}" alt="{{ thumbnailAlt }}"></a>
    </div>

    {%endif%}


    {% for media in product.media %}

    {% assign mod2 = forloop.index | modulo: 2  %}

    {%if mod2 != 0 %}

    <div class="odd">
      <a  href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
         class=" product-single__thumbnail--{{ section.id }} odd count-{{forloop.index}}"
         data-thumbnail-id="{{ section.id }}-{{ media.id }}">  <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: 'large', scale: 2 }}" alt="{{ thumbnailAlt }}"></a>
    </div>
    {% break %}

    {%endif%}

    {% endfor %}
  </div>

  {% endfor %}

</div>[enter image description here][1]

use cycle tag to to the same, it is simple and easy to use. — Onkar
You need to share the code, what you tried using the cycle — Onkar

Onkar Onkar · Accepted Answer · 2021-07-30T09:34:06

Simply use the same as into snapshot on the desired element where you want to apply the class using cycle.

<div class="col px-2 px-lg-3 pb-3 pb-lg-4 {% cycle 'even','odd' %}">

and add the class on the front end like it.

Let me know if the same clears your doubts regarding it?

update in to your code:

{% for media in product.media %}
  <div class="image-block">
    <div class="{% cycle 'even','odd' %}">
      <a  href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
         class=" product-single__thumbnail--{{ section.id }} even count-{{forloop.index}}"
         data-thumbnail-id="{{ section.id }}-{{ media.id }}">  <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: 'large', scale: 2 }}" alt="{{ thumbnailAlt }}">
      </a>
    </div>
  </div>
{% endfor %}

how to display two image vertical slider in shopify product page

1 Answers