slider

<!-- name of the slider -->
<f:if condition="{data.tx_mask_slider_title}">
{data.tx_mask_slider_title}
</f:if>

<f:if condition="{data.tx_mask_slides}">

<div class="orbit" role="region" aria-label="images in the slider" data-orbit>
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>

<ul class="orbit-container">
       <f:for each="{data.tx_mask_slides}" as="data_item">

	   	<li class="orbit-slide"

			style="background-color:<f:if condition="{data_item.tx_mask_backgroud_color}">
			{data_item.tx_mask_backgroud_color}
			</f:if>;

			color:<f:if condition="{data_item.tx_mask_font_color}">
			{data_item.tx_mask_font_color}
			</f:if>;"
			>

			<!-- naam van de slide -->
			<f:if condition="{data_item.tx_mask_slide_name}">
			{data_item.tx_mask_slide_name}
			</f:if>


			<!-- content in de slide -->
			<f:if condition="{data_item.tx_mask_slide_content}">
			<f:for each="{data_item.tx_mask_slide_content}" as="data_item_item">
			<div class="orbit"><f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item_item.uid}</f:cObject></div>
			</f:for>
			</f:if>


			<!-- tekst als content in de slide -->
			<f:if condition="{data_item.tx_mask_text_inhoud}">
			<div class="orbit"><p><f:format.nl2br>{data_item.tx_mask_text_inhoud}</f:format.nl2br></p></div>
			</f:if>

			</li>
</f:for>
</ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>
</f:if>