<section class="carousel {% if type == 1 %} carousel-full {% endif %}">
  <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="swiper">
        <ul class="swiper-wrapper">
          {% for banner in banners %}
            <li class="swiper-slide">
              <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>
      <!-- If we need navigation buttons -->
      <button class="swiper-button-prev">
        <i class="fas fa-angle-left"></i>
      </button>
      <button class="swiper-button-next">
        <i class="fas fa-angle-right"></i>
      </button>

      <div class="swiper-scrollbar"></div>
    </div>
  </div>
</section>

<style>
  .carousel .swiper-slide{
    max-width: calc(50% - ({{ spacing }}px / 2));
  }
</style>

<script type="text/javascript">
  window.waitEvent('scripts_window', function() {
    new Swiper('.slide-carousel-{{ module }} .swiper', {
      slidesPerView: 'auto',
      slidesPerGroupAuto: 'auto',
      centerInsufficientSlides: true,
      speed: 650,
      scrollbar: {
        el: '.slide-carousel-{{ module }} .swiper-scrollbar',
        draggable: true,
      },
      spaceBetween: {{ spacing }},
      {% if scroll == 1 %}
        autoplay: {
          delay: 6000,
          disableOnInteraction: false,
        },
      {% endif %}
      navigation: {
          nextEl: ".slide-carousel-{{ module }} .swiper-button-next",
          prevEl: ".slide-carousel-{{ module }} .swiper-button-prev",
      }
    });
  });
 </script>