You are here

Home » API reference » Slick Carousel 8.2

slick.html.twig in Slick Carousel 8.2

Same filename and directory in other branches
  1. 8 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) }}

See also

https://www.drupal.org/node/1906780

https://www.drupal.org/node/1903374

1 theme call to slick.html.twig
SlickManager::slick in src/SlickManager.php
Returns a cacheable renderable array of a single slick instance.

File

templates/slick.html.twig
View source 
  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.     settings.unslick ? 'unslick',

  33.     settings.vertical ? 'slick--vertical',

  34.     settings.attributes.class ? settings.attributes.class|join(' '),

  35.     settings.skin ? 'slick--skin--' ~ settings.skin|clean_class,

  36.     'boxed' in settings.skin ? 'slick--skin--boxed',

  37.     'split' in settings.skin ? 'slick--skin--split',

  38.     settings.optionset ? 'slick--optionset--' ~ settings.optionset|clean_class,

  39.     arrow_down_attributes is defined ? 'slick--has-arrow-down',

  40.     settings.asNavFor ? 'slick--' ~ display|clean_class,

  41.     settings.slidesToShow > 1 ? 'slick--multiple-view',

  42.     settings.count <= settings.slidesToShow ? 'slick--less',

  43.     display == 'main' and settings.media_switch ? 'slick--' ~ settings.media_switch|clean_class,

  44.     display == 'thumbnail' and settings.thumbnail_caption ? 'slick--has-caption'

  45.   ]

  46. %}

  47. {%

  48.   set arrow_classes = [

  49.     'slick__arrow',

  50.     settings.vertical ? 'slick__arrow--v',

  51.     settings.skin_arrows ? 'slick__arrow--' ~ settings.skin_arrows|clean_class

  52.   ]

  53. %}

  54. <div{{ attributes.addClass(classes) }}>

  55.   {% if not settings.unslick %}

  56.     <div{{ content_attributes.addClass('slick__slider') }}>

  57.   {% endif %}

  58. 

  59.   {% block slick_content %}

  60.     {{ items }}

  61.   {% endblock %}

  62. 

  63.   {% if not settings.unslick %}

  64.     </div>

  65.     {% block slick_arrow %}

  66.       <nav{{ arrow_attributes.addClass(arrow_classes) }}>

  67.         <button type="button" data-role="none" class="slick-prev" aria-label="{{ settings.prevArrow|t }}" tabindex="0">{{ settings.prevArrow|t }}</button>

  68.         {% if arrow_down_attributes is defined %}

  69.           <button{{ arrow_down_attributes.addClass('slick-down')

  70.             .setAttribute('type', 'button')

  71.             .setAttribute('data-role', 'none')

  72.             .setAttribute('data-target', settings.downArrowTarget)

  73.             .setAttribute('data-offset', settings.downArrowOffset) }}></button>

  74.         {% endif %}

  75.         <button type="button" data-role="none" class="slick-next" aria-label="{{ settings.nextArrow|t }}" tabindex="0">{{ settings.nextArrow|t }}</button>

  76.       </nav>

  77.     {% endblock %}

  78.   {% endif %}

  79. </div>