drowl_paragraphs_bs-1.x-dev/modules/drowl_paragraphs_bs_type_layout_slideshow/templates/layouts/drowl-paragraphs-bs-slideshow--1col.html.twig

{#
/**
 * @file
 * Template base file for our drowl layout template files.
 *
 * This template provides a base from which the other layout slideshow template
 * files inherit from.
 * Global classes and blocks are defined here.
 *
 * Variables:
 * - css_id: An optional CSS id to use for the layout.
 * - content: An array of content, each item in the array is keyed to one
 *   panel of the layout. This layout supports the following sections:
 *   - content.slides
 */
#}

{# Ensure slick styles are loaded #}
{{ attach_library('slick/slick.css') }}
{{ attach_library('slick/slick.theme') }}

{# Define global drowl layout classes the other layouts will inherit from #}
{%
  set classes = [
    'layout',
    'layout--' ~ layout.id|clean_class
  ]
%}

{%
  set slideshow_wrapper_classes = [
    drowl_paragraphs_layout_in_preview ? '' : 'slick',
    'slick--skin--default'
  ]
%}

{# Define default blocks #}
{% block layout_container_opener %}
<div class="drowl-layout{% if attributes.hasClass('page-width') %} container{% endif %}">
  <div class="drowl-layout__inner{% if attributes.hasClass('viewport-width-cp') %} container{% endif %}">
{% endblock layout_container_opener %}
    {% block layout_outer %}
        <div{{ attributes.addClass(classes) }}>
          <div {{ slideshow_wrapper_attributes.addClass(slideshow_wrapper_classes) }}>
            <div {{ region_attributes.slides.addClass('slick__slider') }}>
              {#
                Put the layout "slide" regions paragraphs into an extra 'slick__slide'
                wrapper to fit the slick modules standards.
              #}
              {% if drowl_paragraphs_layout_in_preview %}
                {{ content.slides }}
              {% else %}
                {% for slide in content.slides %}
                  {# Ensure its a render array (and not attributes or something) #}
                  {% if slide['#theme'] %}
                    <div class="slick__slide">
                      {{ slide }}
                    </div>
                  {% endif %}
                {% endfor %}
              {% endif %}
            </div>
            {% block slick_arrow %}
              {% if slideshow_settings.arrows %}
                <nav class="slick__arrow">
                  <button type="button" data-role="none" class="slick-prev slick-prev-custom" aria-label="{{ 'Previous'|t }}" tabindex="0">{{ 'Previous'|t }}</button>
                  <button type="button" data-role="none" class="slick-next slick-next-custom" aria-label="{{ 'Next'|t }}" tabindex="0">{{ 'Next'|t }}</button>
                </nav>
              {% endif %}
            {% endblock %}
          </div>
        </div>
    {% endblock layout_outer %}
{% block layout_container_closer %}
    </div>
  </div>
{% endblock layout_container_closer %}