{% macro renderBanner(j3, context) %}
  {% import _self as self %}
  {% set index = 0 %}
  {% for item in context.items %}
    <div class="{{ j3.classes(item.classes) }}">
      <a {% if item.link.href %}href="{{ item.link.href }}"{% endif %} {{ j3.linkAttrs(item.link) }}>
        {% if 0 %}
          <img src="{{ item.image }}" data-src="{{ item.image }}" alt="{{ item.title }}" width="{{ context.imageDimensions.width }}" height="{{ context.imageDimensions.height }}" class="lazyload"/>
        {% else %}
          <img src="{{ item.image }}" alt="{{ item.title }}" width="{{ context.imageDimensions.width }}" height="{{ context.imageDimensions.height }}"/>
        {% endif %}
        <span class="banner-text banner-caption">{{ item.title }}</span>
        <span class="banner-text banner-caption-2">{{ item.title2 }}</span>
      </a>
    </div>
  {% endfor %}
{% endmacro %}
{% import _self as self %}
<div id="{{ id }}" class="{{ j3.classes(classes) }}">
  {% if title %}
    <h3 class="title module-title">{{ title }}</h3>
  {% endif %}
  <div class="module-body">
    {# grid #}
    {% if not carousel %}
      {{ self.renderBanner(j3, _context) }}
    {% endif %}
    {# grid + carousel #}
    {% if carousel %}
      <div class="swiper" data-items-per-row='{{ itemsPerRow|json_encode(constant('JSON_FORCE_OBJECT')) }}' data-options='{{ carouselOptions|json_encode }}'>
        <div class="swiper-container" {% if j3.isRTL() %}dir="rtl"{% endif %}>
          <div class="swiper-wrapper">
            {{ self.renderBanner(j3, _context) }}
          </div>
        </div>
        <div class="swiper-buttons">
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    {% endif %}
  </div>
</div>
