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

【问题标题】：how to display two image vertical slider in shopify product page如何在shopify产品页面中显示两个图像垂直滑块
【发布时间】：2021-07-30 07:05:51
【问题描述】：

它在滑块中仅显示偶数图像，奇数图像被隐藏 0

我已经在液体中分配了一个变量并创建了奇数和偶数类我需要在图像块类中一个偶数和一个奇数

在 Google/Shopify 备忘单/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]

【问题讨论】：

使用cycle标签来相同，简单好用。
查看更多关于同一Here
没有任何帮助
您需要分享代码，您尝试使用cycle
我不知道如何使用循环

标签： shopify

【解决方案1】：

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

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

并像这样在前端添加类。

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

更新您的代码：

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

【讨论】：