uikit_slideshow-8.x-2.2/templates/views-view-uikit-slideshow.html.twig

{#
/**
 * @file
 * Default theme implementation to display a view of uikit slideshow rows.
 *
 * Available variables:
 * - attributes: HTML attributes for the container.
 * - rows: A list of rows for this list.
 *   - attributes: The row's HTML attributes.
 *   - content: The row's contents.
 * - title: The title of this group of rows. May be empty.
 * - list: @todo.
 *   - type: Starting tag will be either a ul or ol.
 *   - attributes: HTML attributes for the list element.
 *
 * @see template_preprocess_views_view_uikit_slideshow()
 *
 * @ingroup themeable
 */
#}

<div data-uk-slideshow="{autoplay:true, kenburns:true}">
  <ul class="uk-slideshow uk-overlay-active">
    {% set rowCount = -1 %}
    {% for row in rows %}
      {% set rowCount = rowCount + 1 %}
      <li data-uk-slideshow-item={{ rowCount }}>
        {{ row.slide_image }}
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-fade">
          <h2{{ title_attributes.addClass('node__title') }}>
            {{ row.slide_title }}
          </h2>
          <div class="uk-hidden-small">
            {{ row.slide_body }}
          </div>
        </div>
        <a class="uk-position-cover" href="javascript:;" onclick="window.location.href=('{{ row.node_link }}')"></a>
      </li>
    {% endfor %}
  </ul>
  <ul class="uk-slideset uk-grid uk-grid-small uk-flex-center uk-container-center uk-grid-width-1-10">
    {% set rowCount = -1 %}
    {% for row in rows %}
      {% set rowCount = rowCount + 1 %}
      <li class="uk-margin-small-top uk-margin-small-bottom" data-uk-slideshow-item={{ rowCount }}>
        {{ row.thumbnail }}
      </li>
    {% endfor %}
  </ul>
</div>