如何在shopify产品页面中显示两个图像垂直滑块

Question

它只显示滑块中的偶数图像奇数图像被隐藏 0

我已经在 liquid 中分配了一个变量，并制作了奇数和偶数 classes 我需要图像块中的一个偶数和一个奇数 class

正在 Google/Shopify cheatsheet/liquid Github wiki 上寻找语法，但似乎找不到任何有用的东西

这可能吗？

我在尝试

  {% 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]

Answer 1

只需在要使用 cycle 应用 class 的所需元素上使用与快照相同的方法。

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

并在前端添加class。

让我知道这是否消除了您对此的疑虑？

更新您的代码：

{% 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 %}

如何在shopify产品页面中显示两个图像垂直滑块

how to display two image vertical slider in shopify product page

shopify