我目前正在尝试在前端构建一个带有 bootstrap 的轮播。
生成幻灯片效果很好。
<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}">
<a href="" class="btn btn-xs">read more</a>
</f:if>
</p>
</f:if>
</div>
</div>
</div>
</f:if>
</f:for>
</f:for>
</f:if>
现在我需要控件的小点。
问题是,他们需要这样计算:
<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>
使用与我相同的
f:for
循环来生成幻灯片并结合 iteration
属性不起作用,因为它嵌套在行和列中。以下输出与
<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>
幸运的是
gallery
数组也有一个整数,其中存储了图像的数量 {gallery.count.files} = 3
。必须有一种简单的方法来使用 for 循环或类似的方法来仅使用整数而不是数组来计数,对吗?
最佳答案
在 TYPO3v8 及以上版本中:
{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}')}
在 TYPO3v7 及更早版本中,您将需要 VHS 库并将
f:variable
替换为 v:variable.set
并将 {count + 1}
替换为 {count -> v:math.sum(b: 1)}
。
关于for-loop - TYPO3:在流体中计数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44259106/