slick.html.twig in Slick Carousel 8

Same filename and directory in other branches

8.2 templates/slick.html.twig

Default theme implementation for the Slick carousel template.

This template holds 3 displays: main, thumbnail and overlay slicks in one. Arrows are enforced, but toggled by JS accordingly. This allows responsive object to enable and disable it as needed without losing context.

Available variables:

items: The array of items containing main image/video/audio, optional image/video/audio overlay and captions, and optional thumbnail texts/images.
settings: A cherry-picked settings that mostly defines the slide HTML or layout, and none of JS settings/options which are defined at data-slick.
attributes: The array of attributes to hold the main container classes, id.
content_attributes: The array of attributes to hold optional RTL, id and data-slick containing JSON object aka JS settings the Slick expects to override default options. We don't store these JS settings in the normal <head>, but inline within data-slick attribute instead.

Debug: Use Kint: {{ kint(variable) }} Dump all available variables and their contents: {{ dump() }} Dump only the available variable keys: {{ dump(_context|keys) }}

File

templates/slick.html.twig

View source

{#
/**
 * @file
 * Default theme implementation for the Slick carousel template.
 *
 * This template holds 3 displays: main, thumbnail and overlay slicks in one.
 * Arrows are enforced, but toggled by JS accordingly. This allows responsive
 * object to enable and disable it as needed without losing context.
 *
 * Available variables:
 * - items: The array of items containing main image/video/audio, optional
 *     image/video/audio overlay and captions, and optional thumbnail
 *     texts/images.
 * - settings: A cherry-picked settings that mostly defines the slide HTML or
 *     layout, and none of JS settings/options which are defined at data-slick.
 * - attributes: The array of attributes to hold the main container classes, id.
 * - content_attributes: The array of attributes to hold optional RTL, id and
 *     data-slick containing JSON object aka JS settings the Slick expects to
 *     override default options. We don't store these JS settings in the normal
 *     <head>, but inline within data-slick attribute instead.
 *
 * Debug:
 * @see https://www.drupal.org/node/1906780
 * @see https://www.drupal.org/node/1903374
 * Use Kint: {{ kint(variable) }}
 * Dump all available variables and their contents: {{ dump() }}
 * Dump only the available variable keys: {{ dump(_context|keys) }}
 */
#}
{%
  set classes = [
    'slick',
    settings.unslick ? 'unslick',
    display == 'main' and settings.blazy ? 'blazy',
    settings.vertical ? 'slick--vertical',
    settings.attributes.class ? settings.attributes.class|join(' '),
    settings.skin ? 'slick--skin--' ~ settings.skin|clean_class,
    'boxed' in settings.skin ? 'slick--skin--boxed',
    'split' in settings.skin ? 'slick--skin--split',
    settings.optionset ? 'slick--optionset--' ~ settings.optionset|clean_class,
    arrow_down_attributes is defined ? 'slick--has-arrow-down',
    settings.asNavFor ? 'slick--' ~ display|clean_class,
    settings.slidesToShow > 1 ? 'slick--multiple-view',
    settings.count <= settings.slidesToShow ? 'slick--less',
    display == 'main' and settings.media_switch ? 'slick--' ~ settings.media_switch|clean_class,
    display == 'thumbnail' and settings.thumbnail_caption ? 'slick--has-caption'
  ]
%}
{%
  set arrow_classes = [
    'slick__arrow',
    settings.vertical ? 'slick__arrow--v',
    settings.skin_arrows ? 'slick__arrow--' ~ settings.skin_arrows|clean_class
  ]
%}

<div{{ attributes.addClass(classes) }}>
  {% if not settings.unslick %}
    <div{{ content_attributes.addClass('slick__slider') }}>
  {% endif %}

  {% block slick_content %}
    {% for item in items %}
      {{ item }}
    {% endfor %}
  {% endblock %}

  {% if not settings.unslick %}
    </div>
    {% block slick_arrow %}
      <nav{{ arrow_attributes.addClass(arrow_classes) }}>
        <button type="button" data-role="none" class="slick-prev" aria-label="{{ settings.prevArrow|t }}" tabindex="0">{{ settings.prevArrow|t }}</button>
        {% if arrow_down_attributes is defined %}
          <button{{ arrow_down_attributes.addClass('slick-down')
            .setAttribute('type', 'button')
            .setAttribute('data-target', settings.downArrowTarget)
            .setAttribute('data-offset', settings.downArrowOffset) }}></button>
        {% endif %}
        <button type="button" data-role="none" class="slick-next" aria-label="{{ settings.nextArrow|t }}" tabindex="0">{{ settings.nextArrow|t }}</button>
      </nav>
    {% endblock %}
  {% endif %}
</div>

You are here

slick.html.twig in Slick Carousel 8

See also

File

API Navigation