{% if carousel.title %}
  <h4 class="pt-4">{{ carousel.i18n[site.lang] | default: carousel.title }}</h4>
{% endif %}

<div id="{{ carousel.id }}BootstrapCarousel" class="carousel slide" data-ride="carousel">

  {% if carousel.indicators %}
    <ol class="carousel-indicators">
      {% for photo in (1..carousel.photos) %}
        <li data-target="#{{ carousel.id }}BootstrapCarousel" data-slide-to="{{ forloop.index0 }}" class="{% if forloop.index == 1 %}active{% endif %}"></li>
      {% endfor %}
    </ol>
  {% endif %}

  <div class="carousel-inner">
    {% for photo in (1..carousel.photos) %}
      <div class="carousel-item {% if forloop.index == 1 %}active{% endif %}">
        <img src="{{ site.amazon-s3 }}/components/sliders/bootstrap/img/{{ carousel.id }}/{{ forloop.index }}.jpg" class="d-block w-100" alt="{{ carousel.title | default: carousel.id }}">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{ carousel.captions[forloop.index0].title }}</h5>
          <p>{{ carousel.captions[forloop.index0].text }}</p>
        </div>
      </div>
    {% endfor %}
  </div>

  <a class="carousel-control-prev" href="#{{ carousel.id }}BootstrapCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="carousel-control-next" href="#{{ carousel.id }}BootstrapCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>