Quote

{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">
					<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
					<li data-target="#quote-carousel" data-slide-to="1"></li>
					<li data-target="#quote-carousel" data-slide-to="2"></li>
					<li data-target="#quote-carousel" data-slide-to="3"></li>
					<li data-target="#quote-carousel" data-slide-to="4"></li>
				</ol>

				<!-- Carousel Slides / Quotes -->
				<div class="carousel-inner" role="listbox">

					<!-- Quote 1 -->
					<div class="item active">
						<blockquote>
							<f:format.html>{field.expert1}</f:format.html>
							<small>{field.expertName1}</small>
						</blockquote>
					</div>
					<!-- Quote 2 -->
					<div class="item">
						<blockquote>
							<f:format.html>{field.expert2}</f:format.html>
							<small>{field.expertName2}</small>
						</blockquote>
					</div>
					<!-- Quote 3 -->
					<div class="item">
						<blockquote>
							<f:format.html>{field.expert3}</f:format.html>
							<small>{field.expertName3}</small>
						</blockquote>
					</div>
					<!-- Quote 4 -->
					<div class="item">
						<blockquote>
							<f:format.html>{field.expert4}</f:format.html>
							<small>{field.expertName4}</small>
						</blockquote>
					</div>
					<!-- Quote 5 -->
					<div class="item">

						<blockquote>
							<f:format.html>{field.expert5}</f:format.html>
							<small>{field.expertName5}</small>
						</blockquote>
					</div>
				</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>