<div class="c-carousel c-carousel--js-enabled">
  <div class="c-carousel__header">
    <h3 class="c-carousel__heading">{{heading}}</h3>
    <p class="c-carousel__count" role="status" data-suffix="{{countSuffix}}">0 of 0 {{countSuffix}}</p>
  </div>

  <div class="c-carousel__body">
    <div class="c-carousel__arrow c-carousel__arrow--left u-hidden">
      <button class="c-button c-button--icon-only c-button--semi-transparent-lighten c-button--no-border" type="button" aria-hidden="true" tabindex="-1">
        <div class="c-carousel__arrow-inner">
          <svg class="c-button__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
            <use xlink:href="{{generatedSvgSpritePath}}#carousel-arrow-left"></use>
          </svg>
        </div>
      </button>
    </div>

    <div class="c-carousel__content">
      <ul class="c-carousel__slides">
        {{#each slides}}
          <li class="c-carousel__slide">
            <div class="c-carousel__slide-content">{{{this}}}</div>
          </li>
        {{/each}}
        <li class="c-carousel__slide c-carousel__slide--placeholder" aria-hidden="true"></li>
      </ul>
    </div>

    <div class="c-carousel__arrow c-carousel__arrow--right u-hidden">
      <button class="c-button c-button--icon-only c-button--semi-transparent-lighten c-button--no-border" type="button" aria-hidden="true" tabindex="-1">
        <div class="c-carousel__arrow-inner">
          <svg class="c-button__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
            <use xlink:href="{{generatedSvgSpritePath}}#carousel-arrow-right"></use>
          </svg>
        </div>
      </button>
    </div>

    <div class="c-carousel__arrow c-carousel__arrow--rewind u-hidden">
      <button class="c-button c-button--icon-only c-button--semi-transparent-lighten c-button--no-border" type="button" aria-hidden="true" tabindex="-1">
        <div class="c-carousel__arrow-inner">
          <svg class="c-button__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
            <use xlink:href="{{generatedSvgSpritePath}}#carousel-arrow-rewind"></use>
          </svg>
        </div>
      </button>
    </div>

  </div>
</div>
