hoover-media-block.html.twig

{#
/**
 * @file
 * Default theme implementation for a swiper hoover media block.
 *
 * Available variables:
 * - items: List of slider element.
 *   - thumbnail: URL image thumbnail
 *   - large_img: URL large image
 * - attributes: Classes.
 * //- link: A link to the file.
 *
 * // @see template_preprocess_file_link()
 *
 * @ingroup themeable
 */
#}
{{ kint(items) }}
<div{{ attributes }}>
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <!--
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
-->
            {% for item in items %}
                <div{{ item.attributes.addClass('swiper-slide') }} style="background-image:url({{ item.large_img }})"></div>
            {% endfor %}
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <!--<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
-->
            {% for item in items %}
                <div{{ item.attributes.addClass('swiper-slide') }} style="background-image:url({{ item.thumbnail }})"></div>
            {% endfor %}
        </div>
    </div>
</div>