website/templates/html/slideshow.html

{% if slideshow %}
{{ slideshow_header }}


<div id="the-carousel" class="carousel slide">
	<!-- Indicators -->
	<ol class="carousel-indicators">
		{% for slide in obj.slides %}
			<li data-target="#the-carousel" data-slide-to="0" 
				{%- if loop.index==0 %}class="active"{% endif %}></li>
		{% endfor %}
	</ol>
	
	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		{% for slide in obj.slides %}
		<div class="{% if slide.idx==1 %}active {% endif %}item">
			<img src="{{ slide.image }}" />
			{% if slide.heading or slide.description %}
			<div class="carousel-caption">
				{% if slide.heading %}<h4>{{ slide.heading }}</h4>{% endif %}
				{% if slide.description %}<p>{{ slide.description }}</p>{% endif %}
			</div>
			{% endif %}
		</div>
		{% endfor %}
	</div>

	<!-- Controls -->
	<a class="left carousel-control" href="#the-carousel" data-slide="prev">
		<span class="icon icon-chevron-left"></span>
	</a>
	<a class="right carousel-control" href="#the-carousel" data-slide="next">
		<span class="icon icon-chevron-right"></span>
	</a>
</div>

<script>$(".carousel").carousel();</script>
{% endif %}