0

I am going to implement twitter bootstrap's carousel in order to display five items at once. My system uses the template engine smarty.

I am already familiar with smarty basics. The following code would display all my items:

<ul class="thumbnails">
{foreach $items as $item}
    <li class="span2">
        <div class="caption">
            <h5>{$item.title}</h5>
        </div>
        <div class="thumbnail">
            <img src="{$item.image}" alt="">
        </div>
    </li>        
{/foreach}
</ul>

Unfortunately twitter bootstrap's carousel needs all the items separated into blocks, like that:

<ul class="thumbnails">
    <div class="item active">
        <ul class="thumbnails">
            <li class="span2 offset1">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
        </ul>
    </div>
    <div class="item">
        <ul class="thumbnails">
            <li class="span2 offset1">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
        </ul>
    </div>
    ...
  </ul>

How do I achieve this by using smarty's foreach loop:

  • Putting 5 items into one div.item the next 5 items into the next div.item and so on
  • The first div.item should get the class 'active'
  • The first item in every div.item should get the class '.offset1'
4

1 に答える 1

2

Smarty は、ループが何回通過したかを確認できるいくつかの魔法の変数を定義します (詳細については、ドキュメントを{foreach}参照してください)。

あなたの場合、チェックしたい：

  • {$item@first}最初のアクティブな div.item を開く
  • {$item@iteration is div by 5}次の div.item を閉じて開き、その最初の li にoffset1クラスを与える
  • {$item@last}5 で割り切れるかどうかにかかわらず、最後の div.item を閉じる
于 2013-03-16T17:29:38.763 に答える