{{ attach_library('goizueta_theme/carousel') }}
<h2>One per page</h2>
<section class="carousel">
  <div class="splide carousel-main page-size-1" aria-label="{{ carousel.title }}">
    {% include '@components/heading/heading.twig' with {
      "heading" : {
        "title_light": carousel.title,
      }
    } only %}
    <div class="splide__track">
      <ul class="splide__list">
        {% for card in carousel.cards %}
          <li class="splide__slide">
            {% include '@components/carousel-card/carousel-card.twig' with {
              "carousel_card": card
            } only %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>
<h2>3 per page</h2>
<section class="carousel">
  <div class="splide carousel-main page-size-3" aria-label="{{ carousel2.title }}" data-splide='{"perPage": 3, "perMove": 1}'>
    {% include '@components/heading/heading.twig' with {
      "heading" : {
        "title_light": carousel2.title,
      }
    } only %}
    <div class="splide__track">
      <ul class="splide__list">
        {% for card in carousel2.cards %}
          <li class="splide__slide">
            {% include '@components/carousel-card/carousel-card.twig' with {
              "carousel_card": card
            } only %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>
<h2>1 per page with thumbnails</h2>
<section class="carousel" data-show-thumbnails="true">
  <div class="splide carousel-main page-size-1" aria-label="{{ carousel3.title }}">
    {% include '@components/heading/heading.twig' with {
      "heading" : {
        "title_light": carousel3.title,
      }
    } only %}
    <div class="splide__track">
      <ul class="splide__list">
        {% for card in carousel3.cards %}
          <li class="splide__slide">
            {% include '@components/carousel-card/carousel-card.twig' with {
              "carousel_card": card
            } only %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="splide carousel-thumbnails">
    <div class="splide__track">
      <ul class="splide__list">
        {% for card in carousel3.cards %}
          <li class="splide__slide">
            <img src="{{ card.media.thumbnail_url }}" alt="{{ card.title }}">
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>