slick-grid.html.twig in Slick Carousel 8

Default theme implementation for the slick-grid items template.

Available variables:

• attributes: An array of attributes to apply to the element.
• items: A renderable array containing chunks of slick-slide.html.twig.
• settings: A renderable array containing the given settings.

1 theme call to slick-grid.html.twig

SlickManager::buildGrid in src/SlickManager.php

Returns items as a grid display.

File

templates/slick-grid.html.twig

{#
/**
 * @file
 * Default theme implementation for the slick-grid items template.
 *
 * Available variables:
 * - attributes: An array of attributes to apply to the element.
 * - items: A renderable array containing chunks of slick-slide.html.twig.
 * - settings: A renderable array containing the given settings.
 */
#}
{%
  set classes = [
    settings.unslick ? 'slick__grid' : 'slide__content',
    'block-columngrid',
    'block-' ~ grid_id,
    settings.grid_small ? 'small-block-' ~ grid_id ~ '-' ~ settings.grid_small,
    settings.grid_medium ? 'medium-block-' ~ grid_id ~ '-' ~ settings.grid_medium,
    settings.grid ? 'large-block-' ~ grid_id ~ '-' ~ settings.grid
  ]
%}
{%
  set item_classes = [
    not settings.unslick ? 'slide__grid',
    'grid',
    settings.type ? 'grid--' ~ settings.type|clean_class,
    settings.media_switch ? 'grid--' ~ settings.media_switch,
    settings.media_switch and 'box' in settings.media_switch ? 'grid--litebox',
  ]
%}

<ul{{ attributes.addClass(classes) }}>
  {% for delta, item in items %}
    <li{{ item.attributes.addClass(item_classes, 'grid--' ~ delta) }}>
      <div class="grid__content">
        {{ item.content }}
      </div>
    </li>
  {% endfor %}
</ul>