www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/slick/templates/slick.html.twig

   1 {#
   2 /**
   3  * @file
   4  * Default theme implementation for the Slick carousel template.
   5  *
   6  * This template holds 3 displays: main, thumbnail and overlay slicks in one.
   7  * Arrows are enforced, but toggled by JS accordingly. This allows responsive
   8  * object to enable and disable it as needed without losing context.
   9  *
  10  * Available variables:
  11  * - items: The array of items containing main image/video/audio, optional
  12  *     image/video/audio overlay and captions, and optional thumbnail
  13  *     texts/images.
  14  * - settings: A cherry-picked settings that mostly defines the slide HTML or
  15  *     layout, and none of JS settings/options which are defined at data-slick.
  16  * - attributes: The array of attributes to hold the main container classes, id.
  17  * - content_attributes: The array of attributes to hold optional RTL, id and
  18  *     data-slick containing JSON object aka JS settings the Slick expects to
  19  *     override default options. We don't store these JS settings in the normal
  20  *     <head>, but inline within data-slick attribute instead.
  21  *
  22  * Debug:
  23  * @see https://www.drupal.org/node/1906780
  24  * @see https://www.drupal.org/node/1903374
  25  * Use Kint: {{ kint(variable) }}
  26  * Dump all available variables and their contents: {{ dump() }}
  27  * Dump only the available variable keys: {{ dump(_context|keys) }}
  28  */
  29 #}
  30 {%
  31   set classes = [
  32     'slick',
  33     settings.unslick ? 'unslick',
  34     display == 'main' and settings.blazy ? 'blazy',
  35     settings.vertical ? 'slick--vertical',
  36     settings.attributes.class ? settings.attributes.class|join(' '),
  37     settings.skin ? 'slick--skin--' ~ settings.skin|clean_class,
  38     'boxed' in settings.skin ? 'slick--skin--boxed',
  39     'split' in settings.skin ? 'slick--skin--split',
  40     settings.optionset ? 'slick--optionset--' ~ settings.optionset|clean_class,
  41     arrow_down_attributes is defined ? 'slick--has-arrow-down',
  42     settings.asNavFor ? 'slick--' ~ display|clean_class,
  43     settings.slidesToShow > 1 ? 'slick--multiple-view',
  44     settings.count <= settings.slidesToShow ? 'slick--less',
  45     display == 'main' and settings.media_switch ? 'slick--' ~ settings.media_switch|clean_class,
  46     display == 'thumbnail' and settings.thumbnail_caption ? 'slick--has-caption'
  47   ]
  48 %}
  49 {%
  50   set arrow_classes = [
  51     'slick__arrow',
  52     settings.vertical ? 'slick__arrow--v',
  53     settings.skin_arrows ? 'slick__arrow--' ~ settings.skin_arrows|clean_class
  54   ]
  55 %}
  56
  57 <div{{ attributes.addClass(classes) }}>
  58   {% if not settings.unslick %}
  59     <div{{ content_attributes.addClass('slick__slider') }}>
  60   {% endif %}
  61
  62   {% block slick_content %}
  63     {% for item in items %}
  64       {{ item }}
  65     {% endfor %}
  66   {% endblock %}
  67
  68   {% if not settings.unslick %}
  69     </div>
  70     {% block slick_arrow %}
  71       <nav{{ arrow_attributes.addClass(arrow_classes) }}>
  72         {{ settings.prevArrow|striptags('<a><em><span><strong><button><div>')|raw }}
  73         {% if arrow_down_attributes is defined %}
  74           <button{{ arrow_down_attributes.addClass('slick-down')
  75             .setAttribute('type', 'button')
  76             .setAttribute('data-target', settings.downArrowTarget)
  77             .setAttribute('data-offset', settings.downArrowOffset) }}></button>
  78         {% endif %}
  79         {{ settings.nextArrow|striptags('<a><em><span><strong><button><div>')|raw }}
  80       </nav>
  81     {% endblock %}
  82   {% endif %}
  83 </div>