代码之家 › 专栏 › 技术社区 › Hakeem Baba

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

liquid shopify jekyll ruby ruby-on-rails

Hakeem Baba · 技术社区 · 6 年前

我正在尝试创建一个引导传送带,使用液体显示每张幻灯片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个项目/课程。如果您需要更多信息或代码示例,请通知我。

1 回复 | 直到 6 年前

drip 6 年前

<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
< if <div class="item">
<div class="col-md-4">{% include "courses/box", course: course %}</div>
</div> <div>

推荐文章

vidit · 如何在购物车页面上基于商品属性显示商品

2 年前

Kayote · Jekyll-在滑块中显示图像和文本

6 年前

demiton · 是否可以在不知道的情况下循环jekyll页面的yaml变量?

6 年前

Dustin Lee · 在循环液体中添加变量

6 年前

SBWT · 循环查看集合中的产品并找到最低价格(不包括0美元的价格)

6 年前

mws2019 · Shopify液体对象不显示数据

6 年前

Mike Florian Doyen · 如何在Azure API管理集正文中使用液体模板解析查询字符串?

6 年前

Rom Eh · 自动部署JSON映射

6 年前

Jiroscopes · Jekyll为博客页面创建导航

6 年前

heyron · 在变量更改时使用元数据字段值更新DOM元素

6 年前