TYPO3: Count up inside Fluid - for-loop

Question

I'm currently trying to build a carousel with bootstrap in the frontend.
Generating the slides works great.
<f:if condition="{gallery.rows}">
<f:for each="{gallery.rows}" as="row">
<f:for each="{row.columns}" as="column">
<f:if condition="{column.media}">
<div class="item">
<f:media
file="{column.media}"
width="{column.dimensions.width}"
height="{column.dimensions.height}"
alt="{column.media.alternative}"
title="{column.media.title}"
/>
<div class="carouselText">
<div class="container">
<h1>{column.media.title}</h1>
<f:if condition="{column.media.description}">
<p>
{column.media.description}
<f:if condition="{column.media.link}">
read more
</f:if>
</p>
</f:if>
</div>
</div>
</div>
</f:if>
</f:for>
</f:for>
</f:if>
Now I need the little dots for the controls.
The problem is, that they need to count up like this:
<li data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
Using the same f:for loop as I did to generate the slides in combination with the iteration attribute doesn't work because it's nested in row and columns.
Following output with <f:for each="{row.columns}" as="column" iteration='i'>:
<li data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="0"></li>
Luckily the gallery array also has an integer in which the amount of images is stored {gallery.count.files} = 3.
There must be an easy way to use for-loops or similar to count up with just an integer and not having an array, right?

Answer 1

In TYPO3v8 and above:
{f:variable(name: 'count', value: 0)}
<!-- perform iteration to any depth, recursive or reverse or whatever -->
<li data-slide-to="{count}">..</li>
{f:variable(name: 'count', value: '{count + 1}')}
In TYPO3v7 and earlier you will need the VHS library and substitute f:variable for v:variable.set and {count + 1} for {count -> v:math.sum(b: 1)}.