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

Question

我正在尝试使用 Liquid 创建一个 bootstrap 轮播，每张幻灯片显示 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>

目前，这段代码有效，但不是动态的。我将不得不为每个循环重复代码，当需要显示很多 courses/items 时，这会变得很困难。

我想知道如何以某种方式增加 forloop，使其每张幻灯片仅显示 3 items/courses。如果您需要更多信息或代码示例，请告诉我。

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 变量，它 return 是当前 forloop.index 中 3 的模块。因此，如果您在 3、6、9 等上。索引它将 return 0.
我检查模块是否为 1 以及它是否不是第一个循环（这是因为我们已经创建了 <div class="item active"> 并且我们不需要另一个和 if 将在第 4 次循环、第 7 次循环等时为真，a.k.a 我们需要放置新的地方 <div class="item"> )
我加了<div class="col-md-4">{% include "courses/box", course: course %}</div>
最后我检查模块是否等于 0 或者这是最后一个循环（因为如果它是最后一个循环，我们将在最后有两个 </div>）并添加关闭 <div>.

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

How to display bootstrap carousel with 3 items per slide using Liquid Shopify

ruby

ruby-on-rails

liquid

jekyll

shopify