Quote New

{namespace dce=ArminVieweg\Dce\ViewHelpers}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<f:layout name="Default" />

<f:section name="main">
	<div class="container">
		<div class='row'>
			<div class="carousel slide" data-ride="carousel" id="quote-carousel">

				<!-- Bottom Carousel Indicators -->
				<ol class="carousel-indicators">
					<f:for each="{field.person}" as="person" iteration=“iterator“>
						<f:if condition="iterator.isFirst">
							<f:then>
								<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
							</f:then>
							<f:else>
								<li data-target="#quote-carousel" data-slide-to="{field.person.n}"></li>
							</f:else>
						</f:if> 
					</f:for>
				</ol>

				<!-- Carousel Slides / Quotes -->
				<div class="carousel-inner" role="listbox">
					<f:for each="{field.person}" as="person" iteration=“iterator“>
						<f:if condition="iterator.isFirst">
							<f:then>
								<!-- Quote 1 -->
								<div class="item active">
									<blockquote>
										<f:format.html>{field.expert}</f:format.html>
										<small>{field.expertName}</small>
									</blockquote>
								</div>
							</f:then>
							<f:else>
								<!-- Quote {field.person.n} -->
								<div class="item">
									<blockquote>
										<f:format.html>{field.expert}</f:format.html>
										<small>{field.expertName}</small>
									</blockquote>
								</div>
							</f:else>
						</f:if> 
					</f:for>
				</div>

				<!-- Carousel Buttons Next/Prev -->
				<a data-slide="prev" href="#quote-carousel" class="left carousel-control">
					<span style="top: 25%;" class="glyphicon glyphicon-chevron-left"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a data-slide="next" href="#quote-carousel" class="right carousel-control">
					<span style="top: 25%;" class="glyphicon glyphicon-chevron-right"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>                          
		</div>
	</div>
</f:section>