Carrousel

<section class="gx-carousel" style="--per:2" aria-roledescription="carrousel" aria-label="Werk" data-gx="carousel">
  <div class="gx-carousel__nav">
    <button class="gx-btn gx-btn--secondary gx-btn--icon gx-btn--sm" type="button" data-dir="-1" aria-label="Vorige">
      <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M15 6l-6 6 6 6"/>
      </svg>
    </button>
    <button class="gx-btn gx-btn--secondary gx-btn--icon gx-btn--sm" type="button" data-dir="1" aria-label="Volgende">
      <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M9 6l6 6-6 6"/>
      </svg>
    </button>
  </div>
  <ul class="gx-carousel__track" tabindex="0">
    <li aria-roledescription="dia" aria-label="1 van 4">
      <img src="/img/events-700.webp" alt="" width="700" height="450" loading="lazy" decoding="async">
      <p class="gx-mono">01 · events</p>
    </li>
    <li aria-roledescription="dia" aria-label="2 van 4">
      <img src="/img/signatures-700.webp" alt="" width="700" height="450" loading="lazy" decoding="async">
      <p class="gx-mono">02 · signatures</p>
    </li>
    <li aria-roledescription="dia" aria-label="3 van 4">
      <img src="/img/partnerships-700.webp" alt="" width="700" height="450" loading="lazy" decoding="async">
      <p class="gx-mono">03 · partnerships</p>
    </li>
    <li aria-roledescription="dia" aria-label="4 van 4">
      <img src="/img/productions-700.webp" alt="" width="700" height="450" loading="lazy" decoding="async">
      <p class="gx-mono">04 · productions</p>
    </li>
  </ul>
</section>