Folien zählen/insgesamt mit Zweig

Question

Ich benutze fullpage.js, um eine Galerie zu erstellen.

Ich möchte es mit Wordpress und Timber (TWIG) verwenden. Ich muss Schleifen erstellen.

Ich muss ein Attribut in der Folie meiner Folie hinzufügen. Aber ich muss zwei mit TWIG zählen.

Zuerst muss die Summe der Folien (data-maxslides) und nach jedem Dia inkrementiert werden (Datenstrom gleiten).

Kann ich bitte Hilfe haben?

<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

Der den aktuellen Index erhalten Sie loop.index oder loop.index0, letztere beginnt mit 0 verwenden können. Um mit der Zählung einer Sammlung erhalten Sie length,

Ein Beispiel wäre verwenden können,

{% 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 %}