uikit-view-slider.html.twig in UIkit Components 8.3

Theme override for a view template to display a slider of rows.

Available variables:

• slider_attributes: HTML attributes for the slider himself.
• grid Attributes: HTML attributes for slider list items.
• panel_attributes: HTML attributes for the panel container (image and caption).
• caption_attributes: HTML attributes for the caption.
• items: A list of rows for this slider.
  • title: The row's title.
  • content: The row's contents.
• title: The title of this group of rows. May be empty.

See also

template_preprocess_uikit_view_slider()

File

uikit_views/templates/views/uikit-view-slider.html.twig

{#
/**
 * @file
 * Theme override for a view template to display a slider of rows.
 *
 * Available variables:
 * - slider_attributes: HTML attributes for the slider himself.
 * - grid Attributes: HTML attributes for slider list items.
 * - panel_attributes: HTML attributes for the panel container (image and caption).
 * - caption_attributes: HTML attributes for the caption.
 * - items: A list of rows for this slider.
 *   - title: The row's title.
 *   - content: The row's contents.
 * - title: The title of this group of rows. May be empty.
 *
 * @see template_preprocess_uikit_view_slider()
 */
#}
{% set slider_classes = [
    'uk-slider',
    light ? 'uk-light': '',
    slidenav_outside ? '': 'uk-slider-container',
    slidenav_outside ? '': 'uk-position-relative',
    slidenav_outside ? '': 'uk-visible-toggle',
  ]
%}

{% set panel_classes = [
    'uk-panel',
    caption_toggle ? 'uk-transition-toggle',
  ]
%}

{% if caption_toggle == TRUE %}
  {% set panel_attributes = panel_attributes.setAttribute('tabindex', 0) %}
{% endif  %}

{% set caption_classes = [
    'uk-overlay',
    'uk-text-center',
    caption_background,
    caption_transition,
    caption_position,
    (caption_position == 'uk-position-cover') ? 'uk-flex',
    (caption_position == 'uk-position-cover') ? 'uk-flex-center',
    (caption_position == 'uk-position-cover') ? 'uk-flex-middle',
    caption_modifier,
  ]
%}

{% set slidenav_classes = [
  'uk-position-medium',
  'uk-hidden-hover',
  slidenav_big ? 'uk-slidenav-large',
  ]
%}

{% set slidenav_left_classes = [
  slidenav_outside ? 'uk-position-center-left-out': 'uk-position-center-left',
  ]
%}

{% set slidenav_right_classes = [
  slidenav_outside ? 'uk-position-center-right-out': 'uk-position-center-right',
  ]
%}


{% if title %}
  <h3>{{ title }}</h3>
{% endif %}

<div{{ slider_attributes.addClass(slider_classes) }}>

  {% if slidenav_outside %}
    <div class="uk-position-relative">
      <div class="uk-slider-container">
  {% endif %}

        {# Items #}
        <ul{{ grid_attributes }}>
          {% for row in items %}
              <li>
                {% if row.image %}
                  <div{{ panel_attributes.addClass(panel_classes) }}>
                    {{ row.image }}
                    {% if row.title or row.caption %}
                      <div {{ caption_attributes.addClass(caption_classes) }}>
                          <h3 class="uk-margin-remove">{{ row.title }}</h3>
                          <p class="uk-margin-remove">{{ row.caption }}</p>
                      </div>
                    {% endif %}
                  </div>
                {% else %}
                  {{ row.content }}
                {% endif %}
              </li>
          {% endfor %}
        </ul>

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

    {# Slidenav #}
    {% if slidenav %}
      <a href="#" {{ slidenav_left_attributes.addClass(slidenav_classes).addClass(slidenav_left_classes) }}></a>
      <a href="#" {{ slidenav_right_attributes.addClass(slidenav_classes).addClass(slidenav_right_classes) }}></a>
    {% endif %}

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

  {# Dotnav #}
  {% if dotnav %}
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
  {% endif %}

  {# Thumbnav #}
  {% if thumbnav %}
  <ul class="uk-thumbnav">
    {% for row in items %}
        <li data-uk-slider-item="{{ loop.index0 }}"><a href="#">{{ row.thumbnail }}</a></li>
    {% endfor %}
  </ul>
{% endif %}
</div>