<div id="MyCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#" data-slide-to="0" class="active"></li>
<li data-target="#" data-slide-to="1"></li>
<li data-target="#" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../dummy/images/stap-voor-stap.jpg" alt="Chania" />
</div>
<div class="item">
<img src="../../dummy/images/mensen-steken-hand-op.jpg" alt="Chania" />
</div>
<div class="item">
<img src="../../dummy/images/deze-bestaat-niet.jpg" alt="Oeps" />
</div>
</div>
<a href="#MyCarousel" class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Vorige</span>
</a>
<a href="#MyCarousel" class="right carousel-control" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Volgende</span>
</a>
</div>
<div id="{{ carouselId }}" class="carousel slide" data-ride="carousel">
{{! Indicators }}
<ol class="carousel-indicators">
{{#each slides }}
<li data-target="#{{ carouselId }}" data-slide-to="{{ @index }}" {{#if active }}class="active"{{/if}}></li>
{{/each}}
</ol>
{{! Wrapper for slides }}
<div class="carousel-inner" role="listbox">
{{#each slides }}
<div class="item{{#if active }} active{{/if}}">
<img src="{{path image }}" alt="{{ imageAlt }}" />
</div>
{{/each}}
</div>
{{! Controls }}
<a href="#{{ carouselId }}" class="left carousel-control" role="button" data-slide="prev">
{{> '@icon' icon="glyphicon glyphicon-chevron-left" }}
<span class="sr-only">Vorige</span>
</a>
<a href="#{{ carouselId }}" class="right carousel-control" role="button" data-slide="next">
{{> '@icon' icon="glyphicon glyphicon-chevron-right" }}
<span class="sr-only">Volgende</span>
</a>
</div>
carouselId: MyCarousel
slides:
- active: true
image: /dummy/images/stap-voor-stap.jpg
imageAlt: Chania
- image: /dummy/images/mensen-steken-hand-op.jpg
imageAlt: Chania
- image: /dummy/images/deze-bestaat-niet.jpg
imageAlt: Oeps
Toont een carousel met x-aantal slides. Gebaseerd op Bootstrap “Carousel.js”