{% load cms_tags %}

{% with bootstrap_element="carousel" inline_styles=instance.inline_styles %}
<div id="cmsplugin_{{ instance.id }}" class="{{ instance.css_classes }}"{% if inline_styles %} style="{{ inline_styles }}"{% endif %} {{ instance.data_options }}>
	<ol class="carousel-indicators">
	{% for slide in instance.child_plugin_instances %}
		<li data-target="#cmsplugin_{{ instance.id }}" data-slide-to="{{ forloop.counter0 }}"{% if forloop.first %} class="active"{% endif %}></li>
	{% endfor %}
	</ol>
	<div class="carousel-inner">
	{% for slide in instance.child_plugin_instances %}
		{% render_plugin slide %}
	{% endfor %}
	</div>
	<a class="left carousel-control" href="#cmsplugin_{{ instance.id }}" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a class="right carousel-control" href="#cmsplugin_{{ instance.id }}" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</a>
</div>
{% endwith %}