<div class="cor-carousel" role="group">
  <div class="cor-carousel__buttons">
      <button class="cor-carousel__prev" type="button" disabled="">
        <span class="cor-sr">previous</span>
        <svg class="cor-icon cor-icon--text" aria-hidden="true" focusable="false" width="16" height="16">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
          </svg>
        </svg>
      </button>
      <button class="cor-carousel__next" type="button">
        <span class="cor-sr">next</span>
        <svg class="cor-icon cor-icon--text" aria-hidden="true" focusable="false" width="16" height="16">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
          </svg>
        </svg>
      </button>
    </div>


  
  <div class="cor-carousel__scrollable">
    <ul class="cor-carousel__list">
      {% for slide in slides %}
          <li class="cor-promo">
            {% render '@card' %}
          </li>
        {% endfor %}
    </ul>
  </div>
</div>

<script src="/components/carousel/carousel.js" type="module"></script>