<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" class="bg-blue-1">
    <ul class="cor-carousel__list">
      {% for testimonial in testimonials %}
        <li>
          <article class="cor-card {% if modifier %}cor-card--{{ modifier }}{% endif %} {{ cardExtraClass }}">
            
            {% if testimonial.img %}
            <img  src="{{ testimonial.img }}" alt="{{ image.alt }}" class="cor-card__image cor-image">
            {% endif %}

            <p class="cor-card__copy">
              {% render "@testimonial", { quote: testimonial.quote, author: testimonial.author, more: testimonial.more } %}
            </p>
        

          </article>
        </li>
        {% endfor%}
      </ul>
  </div>
</div>

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