<div id="carousel_product_{{ product.id }}" class="product-carousel carousel fade" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
        {% for product_image in images %}
            <div class="item{% if product_image == primary_image %} active{% endif %}">
                {% set product_image_cropped = product_image|thumbnail(size=(700, 700)) %}
                {% if loop|count > 1 %}
                    <a data-imagelightbox="image-multiple" href="{{ product_image.url }}" rel="gallery" class="thumbnail">
                        <div class="image" style="background-image:url('{{ product_image_cropped }}')" data-title="{% if product_image.title %}{{ product_image.title }}{% endif %}" data-description="{% if product_image.description %}{{ product_image.description }}{% endif %}"></div>
                    </a>
                {% else %}
                    <a data-imagelightbox="image" href="{{ product_image.url }}" rel="gallery" class="thumbnail">
                        <div class="image" style="background-image:url('{{ product_image_cropped }}')" data-title="{% if product_image.title %}{{ product_image.title }}{% endif %}" data-description="{% if product_image.description %}{{ product_image.description }}{% endif %}"></div>
                    </a>
                {% endif %}
            </div>
        {% else %}
            <div class="item active">
                <div class="thumbnail" rel="gallery1">
                    <img class="img-responsive no-image" alt="{{ product.name }}" src="{{ STATIC_URL }}default_dholec/img/no_image.png">
                </div>
            </div>
        {% endfor %}
    </div>
</div>
<div class="wrap-thumbnails">
    <div class="carousel-thumbnails owl-carousel">
        {% for product_image in images %}
            {% if loop|count > 1 %}
                {% set product_image_thumbnail = product_image|thumbnail(size=(300, 300)) %}
                <a href="#carousel_product_{{ product.id }}" class="thumbnail" data-slide-to="{{ loop.index0 }}">
                    <div class="image" style="background-image:url('{{ product_image_thumbnail }}')"></div>
                </a>
            {% endif %}
        {% endfor %}
    </div>
</div>