{% block content %}

<div id="{{ carousel_id }}" class="carousel slide">

<ol class="carousel-indicators">

{% for i in range(slides_content|length) %}

{% if i == 0 %}

<li data-target="#{{ carousel_id }}" data-slide-to="{{ i }}" class="active"></li>

{% else %}

<li data-target="#{{ carousel_id }}" data-slide-to="{{ i }}"></li>

{% endif %}

{% endfor %}

</ol>

<div class="carousel-inner">

{% for i, image in enumerate(slides_content) %}

{% if i == 0 %}

<div class="item active"><img src="{{ image }}" alt="" style="margin: 0 auto 0 auto;"></div>

{% else %}

<div class="item"><img src="{{ image }}" alt="" style="margin: 0 auto 0 auto;"></div>

{% endif %}

{% endfor %}

</div>

<a class="left carousel-control" href="#{{ carousel_id }}" data-slide="prev">&lsaquo;</a>

<a class="right carousel-control" href="#{{ carousel_id }}" data-slide="next">&rsaquo;</a>

</div>

{% endblock %}

<%block name="content">

<div id="${carousel_id}" class="carousel slide">

<ol class="carousel-indicators">

% for i in range(len(slides_content)):

% if i == 0:

<li data-target="#${carousel_id}" data-slide-to="${i}" class="active"></li>

% else:

<li data-target="#${carousel_id}" data-slide-to="${i}"></li>

% endif

% endfor

</ol>

<div class="carousel-inner">

% for i, image in enumerate(slides_content):

% if i == 0:

<div class="item active"><img src="${image}" alt="" style="margin: 0 auto 0 auto;"></div>

% else:

<div class="item"><img src="${image}" alt="" style="margin: 0 auto 0 auto;"></div>

% endif

% endfor

</div>

<a class="left carousel-control" href="#${carousel_id}" data-slide="prev">&lsaquo;</a>

<a class="right carousel-control" href="#${carousel_id}" data-slide="next">&rsaquo;</a>

</div>

</%block>