Question

我使用fullpage.js创建一个图库。

我想将它与Wordpress和Timber（TWIG）一起使用。我必须创建循环。

我需要在幻灯片的div中添加一个属性。但是我需要用TWIG计算两次。

首先，幻灯片（data-maxslides）和每张幻灯片后的总数必须递增（data-currentslide）。

我可以帮忙吗？

<div class="section" id="section1">
      <div class="slide slide0">
              <div class="image-container firstslide" data-type="project" data-currentslide="1" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="http://image.com" class="image portrait">
              </div>
      </div>
      <div class="slide slide1">
              <div class="image-container secondslide" data-type="project" data-currentslide="2" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="http://image.com" class="image portrait">
              </div>
      </div>
      <div class="slide slide2">
              <div class="image-container" data-type="project" data-currentslide="3" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="http://image.com" class="image portrait">
              </div>
      </div>
  </div>
  <div class="section" id="section2">
      <div class="slide slide0">
              <div class="image-container firstslide" data-type="project" data-currentslide="1" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="http://image.com" class="image portrait">
              </div>
      </div>
      <div class="slide slide1">
              <div class="image-container secondslide" data-type="project" data-currentslide="2" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="http://image.com" class="image portrait">
              </div>
      </div>
      <div class="slide slide2">
              <div class="image-container" data-type="project" data-currentslide="3" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="http://image.com" class="image portrait">
              </div>
      </div>
  </div>

Answer 1

获取您可以使用loop.index或loop.index0的当前索引，后者以0开头。要获取集合的计数，您可以使用length，

一个例子是，

{% for section in sections %}
<div class="section" id="section{{ loop.index }}">
      {% for slide in slides[section.getId()] %}
      <div class="slide slide{{ loop.index0 }}">
              <div class="image-container {{ image.getClass() }}" data-type="project" data-currentslide="{{ loop.index }}" data-maxslides="{{ slides[section.getId()] | length }}"  data-title="{{ image.getTitle() }}" data-project="{{ image.getProject() }}">
                  <img src="{{ image.getSource() }}" class="image portrait">
              </div>
      </div>
      {% endfor %}
</div>
{% endfor %}

幻灯片的数量/总数

1 个答案: