<!-- Slideshow container -->
<div class="slideshow-container">

	{% set i = 1 %}
	{% for image in images %}
		<div class="mySlides fade-effect">
			<div class="numbertext">{{ i }} / {{ images|length }}</div>
			<img src="{{ constant('GALLERY_DIR') }}{{ image }}" style="width:100%">
		</div>

		{% set i = i + 1 %}
	{% endfor %}

	<!-- Next and previous buttons -->
	<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
	<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<!-- The dots/circles -->
<div style="text-align:center">
	{% set i = 1 %}

	{% for image in images %}
		<span class="dot" onclick="currentSlide({{ i }})"></span>
		{% set i = i + 1 %}
	{% endfor %}
</div>

<link rel="stylesheet" type="text/css" href="{{ constant('BASE_URL') }}tools/css/gallery.css" />
<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/js/gallery.js"></script>
