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

【问题标题】：How to display bootstrap carousel with 3 items per slide using Liquid Shopify如何使用 Liquid Shopify 显示每张幻灯片包含 3 个项目的引导轮播
【发布时间】：2018-07-30 09:43:23
【问题描述】：

我正在尝试使用 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 个项目/课程。如果您需要更多信息或代码示例，请告诉我。

【问题讨论】：

标签： ruby-on-rails ruby jekyll shopify liquid

【解决方案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">)
我添加了<div class="col-md-4">{% include "courses/box", course: course %}</div>

【讨论】：