PUGでインデックスを再生しています

Question

SOを使用した後、学習プロセスに役立つ多くの回答が見つかったので、あなたの助けを求めるのは私の時間です。 私はいくつかの日からPUGを学んでいますが、私は "それぞれの"繰り返しを使ってhtml/cssスライドショーを作成しようとしています。（これはgitをもう見つけられない、 ））。 申し訳ありません。 ここで私が作ったパグコードです：

.slideshow 
    each val, index in ['img-1.jpg', 'img-2.jpg', 'img-3.jpg'] 
    input(type="radio" name="ss" id='ss-img-' + index).ss-bullet 
    .ss-img 
     img(src=val) 
     label(for='ss-img-' + *index*).ss-nav-prev Image précédente 
     label(for='ss-img-' + *index*).ss-nav-next Image suivante 

（.classesがちょうどボタン/箇条書きの後のスタイリングのためのものである）

をそして、これは私がHTMLで、取得しようとしているものです：

は、もちろん

<div class="slideshow"> 
     <input class="ss-bullet" type="radio" name="ss" id="ss-img-0"> 
     <div class="ss-img"><img src="img/img-1.jpg"> 
     <label class="ss-nav-prev" for="ss-img-2">Image précédente</label> 
     <label class="ss-nav-next" for="ss-img-1">Image suivante</label> 
     </div> 
     <input class="ss-bullet" type="radio" name="ss" id="ss-img-1"> 
     <div class="ss-img"><img src="img/img-2.jpg"> 
     <label class="ss-nav-prev" for="ss-img-0">Image précédente</label> 
     <label class="ss-nav-next" for="ss-img-2">Image suivante</label> 
     </div> 
     <input class="ss-bullet" type="radio" name="ss" id="ss-img-2"> 
     <div class="ss-img"><img src="img/img-3.jpg"> 
     <label class="ss-nav-prev" for="ss-img-1">Image précédente</label> 
     <label class="ss-nav-next" for="ss-img-0">Image suivante</label> 
     </div> 
    </div> 

皆さんが気づいて、欠けている部分がインデックスである：

label(for='ss-img-' + *index*) 

部分。

誰かがこれを完了するためにインデックスを反復する方法を教えてもらえますか？ （あなたが気づいたことのある別のものは、私はまだjavascriptとフランス語に新しいです） ありがとう！

Answer 1

だから、何が必要なのは、円形の（ラップアラウンド）算術の単純なビットは（もthis SO questionへの回答を参照）である。

- var arrayLength = 3; 
label(for='ss-img-' + ((index + arrayLength - 1) % arrayLength)).ss-nav-prev Image précédente 
label(for='ss-img-' + ((index + 1) % arrayLength)).ss-nav-next Image suivante 

Answer 2

あなたのコードが追加さそうで：

.slideshow 
    each val, index in ['img-1.jpg', 'img-2.jpg', 'img-3.jpg'] 
    input(type="radio" name="ss" id='ss-img-' + index) 
    .ss-img 
     img(src=val) 
     label(for='ss-img-' + ((index + val.length - 1) % val.length)) Image précédente 
     label(for='ss-img-' + ((index + 1) % val.length)) Image suivante 

Iを

<div class="slideshow"> 
     <input type="radio" name="ss" id="ss-img-0"> 
     <div class="ss-img"><img src="img-1.jpg"> 
     <label for="ss-img-8">Image précédente</label> 
     <label for="ss-img-1">Image suivante</label> 
     </div> 
     <input type="radio" name="ss" id="ss-img-1"> 
     <div class="ss-img"><img src="img-2.jpg"> 
     <label for="ss-img-0">Image précédente</label> 
     <label for="ss-img-2">Image suivante</label> 
     </div> 
     <input type="radio" name="ss" id="ss-img-2"> 
     <div class="ss-img"><img src="img-3.jpg"> 
     <label for="ss-img-1">Image précédente</label> 
     <label for="ss-img-3">Image suivante</label> 
     </div> 
    </div> 

（それをより明確にするためのクラスを削除）：「これを取得メートルご覧のとおり、最初と最後の項目は、期待通りにループしていません。中央のものだけが正しい。 （そして、「コメント」の代わりに「答え」を使用して申し訳ありませんが、私は複数行のコードを書く方法を見つけませんでした...） 助けてくれてありがとう！ここで

Answer 3

はそれを使用したい方のための最終的なパグコードです：

.slideshow 
    - var imgs = ['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg', 'img/img-4.jpg', 'img/img-5.jpg', 'img/img-6.jpg'] 
    each img, index in imgs 
    input(type="radio" name="ss" id=('ss-img-' + index) checked=(index === 0)).ss-bullet 
    .ss-img 
     img(src=img) 
     label(for='ss-img-' + ((index + imgs.length - 1) % imgs.length)).ss-nav-prev Image précédente 
     label(for='ss-img-' + ((index + 1) % imgs.length)).ss-nav-next Image suivante