commercetools-8.x-1.2-alpha1/modules/commercetools_content/templates/commercetools-carousel.html.twig

{#
/**
 * @file
 *
 * Carousel template.
 *
 * Available variables:
 * - selector: A unique id.
 * - activeImageSlide: The number of the active carousel slide.
 * - items: An array of carousel items.
 *
 * @ingroup themeable
 */
#}
{% set selector = 'ct-content-carousel-' ~ random() %}
{% set activeImageSlide = activeImageSlide | default(0) %}

<div id="{{ selector }}" class="carousel carousel-dark slide" data-bs-interval="false">
  {% if items|length > 1 %}
    <div class="carousel-indicators">
      {% for i in items %}
        <button type="button"
          data-bs-target="#{{ selector }}"
          data-bs-slide-to="{{ loop.index0 }}"
          class="{{ loop.index0 == activeImageSlide ? 'active' : '' }}"
          aria-current="{{ loop.index0 == activeImageSlide ? 'true' : 'false' }}"
          aria-label="Slide {{ loop.index }}">
        </button>
      {% endfor %}
    </div>
  {% endif %}

  <div class="carousel-inner">
    {% for item in items %}
      <div class="carousel-item {{ loop.index0 == activeImageSlide ? 'active' : '' }}">
        {{ item }}
      </div>
    {% endfor %}
  </div>

  {% if items|length > 1 %}
    <button class="carousel-control-prev" type="button" data-bs-target="#{{ selector }}" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">{{ 'Previous'|t }}</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#{{ selector }}" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">{{ 'Next'|t }}</span>
    </button>
  {% endif %}

</div>