<section class="products_slider carousel">
  <div class="brand-logo">
    <div class="product-title">
      <h2 class="heading-2">{{ banner_name }}</h2>
    </div>
    <div class="carousel-container slide-carousel-{{ module }}">
      <div class="carousel-wrapper">
        <ul class="carousel-list">
          {% for banner in banners %}
            <li class="item-column {{ banner.tamanho }}">
              <a href="{{ banner.link }}">
                <picture>
                  <source class="load-image" srcset="" data-src="{{ banner.image.webp }}">
                  <img class="load-image" src="assets/img/loading-black.svg"  data-src="{{ banner.image.jpg }}" alt="{{ banner.name }}" title="{{ banner.title }}">
                </picture>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    window.waitEvent('scripts_window', function() {
      $('.slide-carousel-{{ module }}').carousel({
        resposive: true,
        full: {{ type }},
        autoScroll: {{ (scroll is defined) ? scroll : 0 }},
        {% if scroll is defined and scroll %}
          hoverPause: true,
        {% endif %}
        minWidthItems: {{ (image_width > 300) ? image_width * 0.5 : image_width * 2 }},
      });
    });
  </script>
</section>
