TYPO3 FLUID grouping and limiting elements while looping - typo3

Question

I'm trying to make FLuID loop which will display block with the 4 pictures. I would like to achieve something like this:
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://image1.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://image2.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://image3.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://image4.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://image5.jpg"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://image6.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://image7.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://image8.jpg"></div>
</div>
</div>
The problem is that I'm newbie in FLUID stuff and don't know how to make loop with only 4 elements. My FLUID loop looks like that:
<div class="carousel-inner">
<f:for each="{paginatedAssets}" as="mediaAsset" iteration="iterator">
<f:if condition="{iterator.index} = 4">
<div class="item{f:if(condition: '{iterator.index} == 0', then: ' active')}">
<div data-target="#carousel" data-slide-to="{iterator.index}" class="thumb">
<f:render partial="MediaAsset/Detail" section="Detail" arguments="{alt:mediaAsset.alternative,title:mediaAsset.title,mediaAsset:mediaAsset,width:settings.album.thumb.width,height:settings.album.thumb.height,resizeMode:settings.album.thumb.resizeMode}" />
</div>
</div>
</f:if>
</f:for>
</div>
But it display something like that:
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb">
<img title="Photo 1" alt="Photo 1" src="fileadmin/_processed_/csm_P1320323_f0d26808a1.jpg" width="800" height="600" />
</div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="1" class="thumb">
<img title="Photo 2" alt="Photo 2" src="fileadmin/_processed_/csm_P1320326_d00a6dfa33.jpg" width="800" height="600" />
</div>
</div>
...
<div class="item">
<div data-target="#carousel" data-slide-to="n" class="thumb">
<img title="Photo n" alt="Photo n" src="fileadmin/_processed_/csm_P1234567_f001234567.jpg" width="800" height="600" />
</div>
</div>
</div>
So every loop display only one (not 4) images. Any suggestions?
I will be grateful for any help.

Answer 1

You can use the isFirst, isLast and cycle properties of the iterator to achieve this:
<f:for each="{paginatedAssets}" as="mediaAsset" iteration="iterator">
<f:if condition="{iterator.isFirst}">
<div class="item active">
</f:if>
<div data-target="#carousel" data-slide-to="{iterator.index}" class="thumb">
<f:render partial ... />
</div>
<f:if condition="{iterator.cycle} % 4">
<f:else>
</div>
<div class="item">
</f:else>
</f:if>
<f:if condition="{iterator.isLast}">
</div>
</f:if>
</f:for>