<section class="ds-example example-product">
    <div class="html">
        <div class="product-show-images-slider slick-thumbnails">
            {% for i in 1..8 %}
                <div>
                    <a href="http://via.placeholder.com/900?text=Image {{ i }}" data-lightbox="sylius-product-image">
                        <img data-lazy="http://via.placeholder.com/550?text=Image {{ i }}" class="w-100" alt="Image {{ i }}" />
                    </a>
                </div>
            {% endfor %}
        </div>
        <div class="product-show-images-thumbnail slick-thumbnails-dots">
            {% for i in 1..8 %}
                <div class="slick-dot">
                    <img data-lazy="http://via.placeholder.com/75?text=Image {{ i }}" class="img-fluid" alt="" />
                </div>
            {% endfor %}
        </div>
    </div>
    <pre>
        <code>&lt;div class="product-show-images-slider slick-thumbnails">
    &lt;div>
        &lt;a href="IMG_ORIGINALE" data-lightbox="sylius-product-image">
            &lt;img data-lazy="IMG_LARGE_THUMBNAIL">
        &lt;/a>
    &lt;/div>
    &lt;div>
        &lt;a href="IMG_ORIGINALE" data-lightbox="sylius-product-image">
            &lt;img data-lazy="IMG_LARGE_THUMBNAIL">
        &lt;/a>
    &lt;/div>
&lt;/div>
&lt;div class="product-show-images-thumbnail slick-thumbnails-dots">
    &lt;div class="slick-dot">
        &lt;img data-lazy="IMG_SMALL_THUMBNAIL">
    &lt;/div>
    &lt;div class="slick-dot">
        &lt;img data-lazy="IMG_SMALL_THUMBNAIL">
    &lt;/div>
&lt;/div></code>
    </pre>
</section>
