{% load thumbnail %}
<div class="home_carousel no_margin_left pull-right">
    <!-- Start slideshow-carousel -->
    <div id="carousel-loader">

    </div>
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            {% for listing in listings %}
                <li data-target="#carousel" data-slide-to="{{ forloop.counter0 }}" class="active"></li>
            {% endfor %}
        </ol>
        <!-- Wrapper for slides -->

        {% for listing in listings %}
            <div class="carousel-inner">
                <div class="item{% if forloop.first %} active{% endif %}">
                    <a href="{{ listing.absolute_url }}">
                        {% thumbnail listing.main_image.image "850" crop="center" as image %}
                            <img src="{{ image.url }}" alt="{{ listing.title }}">
                        {% endthumbnail %}
                    </a>

                    <div class="carousel-caption">

                            <h3>{{ listing.title }}</h3>

                            <p>{{ listing.description|truncatewords_html:"20" }}</p>
                    </div>
                </div>

            </div>
        {% endfor %}

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

    </div>
    <!-- // end of slideshow-carousel -->

</div>