Drupal Paragraph Twig Template for creating a Bootstrap Carousel

drupal-paragraph-bootstrap-carousel.html.twig

{# Specify that we want to hide the content so we can print our fields individually #}
{{ content|without('field_sl','field_sli', 'field_wi', 'field_bg') }}
{# In the normal Boostrap carousel markup, we add our conditional fields as classes: #}
{# If Width field (field_wi) has value, add the class #}
{# If Background Color field (field_bg) has value, add the class #}
{# If Slide Interval field (field_sli) has value, add the data interval #}
{# We also add the Paragraph's id as the carousel id so we can allow multiple carousel on one page. (paragraph.id.value)" #}
<div class="element element--layout-slideshow carousel slide{% if content.field_wi %} {{content.field_wi}}{% endif %}{% if content.field_bg %} {{content.field_bg}}{% endif %}" id="myCarousel-{{ paragraph.id.value }}" data-ride="carousel"{% if content.field_sli %} data-interval="{{content.field_sli}}"{% endif %}>
  {# For the carousel indicators, we loop through the slide field #}
  {# We use Twig loop.first to set the active class, and the key to set the data-slide-to #}
  {# Thanks to Jeff Burnz for the if key line: http://drupal.stackexchange.com/a/208765/13347 #}
  <ol class="carousel-indicators">
    {% for key, item in content.field_sl if key|first != '#' %}
      <li class="{% if loop.first %}active{% endif %}" data-slide-to="{{ key }}" data-target="#myCarousel-{{ paragraph.id.value }}"></li>
    {% endfor %}
  </ol>
  {# We repeat the loop for the carousel items, adding a unique class using the key for the carousel controls #}
  <div class="carousel-inner" role="listbox">
    {% for key, item in content.field_sl if key|first != '#' %}
      <div class="element--layout-slideshow__slide-{{ key + 1 }} item{% if loop.first %} active{% endif %}">{{ item }}</div>
    {% endfor %}
  </div>
  {# Carousel controls are pretty spot on to Bootstrap defaults with the addition of the paragraph id #}
  <a class="left carousel-control" href="#myCarousel-{{ paragraph.id.value }}" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel-{{ paragraph.id.value }}" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>