slick-slide.html.twig in Slick Carousel 8

Default theme implementation for the individual slick item/slide template.

Available variables:

• attributes: An array of attributes to apply to the element.
• item.slide: A renderable array of the main image/background.
• item.caption: A renderable array containing caption fields if provided:
  • title: The individual slide title.
  • alt: The core Image field Alt as caption.
  • link: The slide links or buttons.
  • overlay: The image/audio/video overlay, or a nested slick.
  • data: any possible field for more complex data if crazy enough.
• settings: An array containing the given settings.

See also

template_preprocess_slick_slide()

1 theme call to slick-slide.html.twig

template_preprocess_slick_grid in templates/slick.theme.inc

Prepares variables for slick-grid.html.twig templates.

File

templates/slick-slide.html.twig

{#
/**
 * @file
 * Default theme implementation for the individual slick item/slide template.
 *
 * Available variables:
 * - attributes: An array of attributes to apply to the element.
 * - item.slide: A renderable array of the main image/background.
 * - item.caption: A renderable array containing caption fields if provided:
 *   - title: The individual slide title.
 *   - alt: The core Image field Alt as caption.
 *   - link: The slide links or buttons.
 *   - overlay: The image/audio/video overlay, or a nested slick.
 *   - data: any possible field for more complex data if crazy enough.
 * - settings: An array containing the given settings.
 *
 * @see template_preprocess_slick_slide()
 */
#}
{%
  set classes = [
    'slick__slide', 'slide', 'slide--' ~ delta,
    item.slide is empty ? 'slide--text',
    settings.layout ? 'slide--caption--' ~ settings.layout|clean_class,
    settings.class ? settings.class
  ]
%}
{%
  set content_classes = [
    settings.detroy ? 'slide',
    not settings.detroy ? 'slide__content'
  ]
%}
{% set slide %}
  {% block slick_slide %}
    {% if settings.split and not settings.unslick %}
      <div class="slide__media">{{ item.slide }}</div>
    {% else %}
      {{ item.slide }}
    {% endif %}
  {% endblock %}
{% endset %}

{% if settings.wrapper %}
  <div{{ attributes.addClass(classes) }}>
  {% if settings.grid is empty %}<div{{ content_attributes.addClass(content_classes) }}>{% endif %}
{% endif %}

  {% if item.slide %}
    {{ slide }}
  {% endif %}

  {% if item.caption %}
    {% block slick_caption %}
      {% if settings.fullwidth %}<div class="slide__constrained">{% endif %}

        <div class="slide__caption">
          {% if item.caption.overlay %}
            <div class="slide__overlay">{{ item.caption.overlay }}</div>
            {% if settings.data %}<div class="slide__data">{% endif %}
          {% endif %}

          {% if item.caption.title %}
            <h2 class="slide__title">{{ item.caption.title }}</h2>
          {% endif %}

          {% if item.caption.alt %}
            <p class="slide__description">{{ item.caption.alt }}</p>
          {% endif %}

          {{ item.caption.data }}

          {% if item.caption.link %}
            <div class="slide__link">{{ item.caption.link }}</div>
          {% endif %}

          {% if item.caption.overlay and settings.data %}</div>{% endif %}
        </div>

      {% if settings.fullwidth %}</div>{% endif %}
    {% endblock %}
  {% endif %}

{% if settings.wrapper %}
  {% if settings.grid is empty %}</div>{% endif %}
  </div>
{% endif %}