Question

我正在尝试创建一个使用Liquid的引导轮，该幻灯片每张幻灯片显示3个项目。这是我的示例代码

  <div class="item active">
    {% for course in courses %}
      {% if forloop.index >= 1 and forloop.index <= 3 %}
        <div class="col-md-4">
          {% include "courses/box", course: course %}
        </div>
      {% endif %}
    {% endfor %}
  </div>

  <div class="item">
    {% for course in courses %}
      {% if forloop.index >= 4 and forloop.index <= 6 %}
        <div class="col-md-4">
          {% include "courses/box", course: course %}
        </div>
      {% endif %}
    {% endfor %}
  </div>

目前，此代码有效，但不是动态的。我将不得不为每个循环重复代码，并且当有很多课程/项目需要显示时，这变得很困难。

我想知道如何以某种方式增加forloop，以便每张幻灯片仅显示3个项目/课程。请让我知道您是否需要更多信息或代码示例。

Answer 1

也许有更好的选择，但这就是我的想法。

<div class="item active">
{% for course in courses %}
  {%- assign module = forloop.index | modulo: 3 -%}

  {%- if module == 1 -%}
    {%- unless forloop.first -%}
    <div class="item">
    {% endunless %}
  {%- endif -%}

    <div class="col-md-4">
      {% include "courses/box", course: course %}
    </div>

  {%- if module == 0 -%}
    {%- unless forloop.last -%}
      </div>
    {%- endunless -%}
  {%- endif -%}

{% endfor %}
</div>

要分解它。

我将整个逻辑包装在<div class="item active">中，并在底部将其关闭。
我循环所有课程
我分配了一个module变量，该变量从当前forloop.index返回3的模块。因此，如果您在3、6、9等位置。索引将返回0。
我检查模块是否为1，并且它是否不是第一个循环（这是因为我们已经创建了<div class="item active">，并且不需要另一个循环，而if将是当您处于第4循环，第7循环等等，也就是我们需要放置一个新的<div class="item">的地方时，为true
我添加了<div class="col-md-4">{% include "courses/box", course: course %}</div>
最后，我检查模块是否等于0或这是否是最后一个循环（因为如果是最后一个循环，我们将在末尾有两个</div>）并添加结束符{{1 }}。

如何使用Liquid Shopify显示每张幻灯片3个项目的引导轮

1 个答案: