スライドカウント/総数twitter

Question

私はfullpage.jsを使ってギャラリーを作成します。

WordpressとTimber（TWIG）で使用したいと思います。私はループを作成する必要があります。

スライドのdivに属性を追加する必要があります。しかし、私はTWIGで2回カウントする必要があります。

最初に、スライドの合計（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 %}