我目前正在尝试在前端使用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循环或类似的方法来计算总数,而不需要使用数组,对吗?