{#
{% set productImages = product.productImages %}

{% if productImages|length > 0 %}
    <div class="row">
        <div class="product-left">
            {% for i,productImage in productImages %}
                {% set dir = getProductImageDir(productImage.product|default) %}
                {% set imageFullPath=  dir|default~productImage.filename|default %}
                <a href="#previewImg{{ i }}" class="carousel-dot {{ i == 0 ? 'active' }}">
                    <img src="{{  imageFullPath|imagine_filter('thumb',{"thumbnail": {"size": [400,400] }}) }}" alt="">
                </a>
            {% endfor %}

        </div>
        <div class="product-right">
            <div class="owl-carousel owl-theme owl-nav-inside owl-light mb-0" data-toggle="owl" data-owl-options='{
                            "dots": false,
                            "nav": false,
                            "URLhashListener": true,
                            "responsive": {
                                "900": {
                                    "nav": true,
                                    "dots": true
                                }
                            }
                        }'>
                {% for i,productImage in productImages %}
                    {% set dir = getProductImageDir(productImage.product|default) %}
                    {% set imageFullPath=  dir|default~productImage.filename|default %}
                    <div class="intro-slide" data-hash="previewImg{{ i }}">
                        <img src="{{ asset(imageFullPath)  }}" alt="">

                    </div><!-- End .intro-slide -->
                {% endfor %}


            </div>
        </div>
    </div>
{% endif %}
#}
{% set productImages = product.productImages %}

{% if productImages|length > 0 %}
    <div class="row">
        <div class="product-left">
            {% for i,productImage in productImages %}
                {% set dir = getProductImageDir(productImage.product|default) %}
                {% set imageFullPath=  dir|default~productImage.filename|default %}
                <a href="#previewImg{{ i }}" class="carousel-dot {{ i == 0 ? 'active' }}">
                    <img src="{{ imageFullPath|imagine_filter('thumb',{"thumbnail": {"size": [400,400] }}) }}" alt="">
                </a>
            {% endfor %}

        </div>
        <div class="product-right">
            <div class="owl-carousel owl-theme owl-nav-inside owl-light mb-0" data-toggle="owl" data-owl-options='{
                            "dots": false,
                            "nav": false,
                            "URLhashListener": true,
                            "responsive": {
                                "900": {
                                    "nav": true,
                                    "dots": true
                                }
                            }
                        }'>
                {% for i,productImage in productImages %}
                    {% set dir = getProductImageDir(productImage.product|default) %}
                    {% set imageFullPath=  dir|default~productImage.filename|default %}
                    <div class="intro-slide" data-hash="previewImg{{ i }}">
                        <img src="{{ asset(imageFullPath) }}" alt="">

                    </div><!-- End .intro-slide -->
                {% endfor %}


            </div>
        </div>
    </div>
{% endif %}