carousel.html

<h3>
	 {{ include.carousel-header-text }}
</h3>


<div id="carousel-id-{{ include.carousel-id }}">


	{% for collection_item in include.carousel-collection %}
	<div class="{{ include.carousel-id }}-container" id="{{ include.carousel-id }}-slide{{ forloop.index0 }}"

		{% if forloop.first %}
			style="display: inline;"
		{% else %}
			style="display: none;"
		{% endif %}

		>

		{{ collection_item.content }}

	</div>
	{% endfor %}

</div>


<script>
	
		setInterval(function() {
			thingies = jQuery(".{{ include.carousel-id }}-container");
			if(thingies.length > 1)			
			{
				for(i = 0; i < thingies.length; i++)
				{
						if($("div#{{ include.carousel-id }}-slide" + i).is(":visible"))
						{
								$("div#{{ include.carousel-id }}-slide" + i).slideUp("slow");
								$("div#{{ include.carousel-id }}-slide" + ((i + 1) % thingies.length)).slideDown("slow");
								break;
						}
				}
			}	
		}, 20000);

</script>