_image-gallery.twig

{% set modifier_classes = 'uw-ig--' ~ type %}

<div id="uw-ig-{{ images.id }}" class="uw-ig {{ modifier_classes }}" data-id="{{ images.id }}" data-images-num="{{ display_images }}" data-nav="{{ nav }}">
  <div class="uw-ig__wrapper">
    {% if type == NULL or type == 'slider' %}

      {% embed '@layouts/carousel/carousel.twig' %}

        {% block content %}
          {% for index, image in images.images %}
            <div class="uw-ig__item">
              <div class="uw_ig__image">
                <a class="uw-lightbox__open" href="#uw-lightbox-{{ images.id }}-{{ index }}">

                  {% include '@components/responsive-image/responsive-image.twig' with {
                    'sources': image.image.sources,
                    'img_element': image.image.img_element['#uri'],
                    'alt': image.image.alt
                  } %}

                </a>
              </div>
              {% if image.caption %}
                <div class="uw_ig__caption">
                  {% include '@components/caption/caption.twig' with {
                    'caption': image.caption
                  } %}
                </div>
              {% endif %}
            </div>

          {% endfor %}

        {% endblock %}

      {% endembed %}
      {#  lightbox #}

      {% for index, image in images.images %}
        <div class="uw-lightbox" id="uw-lightbox-{{ images.id }}-{{ index }}">
          <div class="uw-lightbox__content">

            <img src="{{ image.original }}" alt="{{ image.image.alt }}">

            <div class="uw-lightbox__title">

              <div class="uw-lightbox__count">
                <span>{{ loop.index }} / {{  loop.length  }}</span>
              </div>

              {% if image.caption %}
                <div class="uw-lightbox__caption">{{ image.caption }}</div>
              {% endif %}
            </div>

            <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>

            {% set numItems =  loop.length - "1" %}
            {%  if index == 0  %}
              {% set prevIndex =  numItems  %}
              {% set nextIndex =  index + "1" %}
            {% elseif index == numItems %}
              {% set nextIndex =  0  %}
              {% set prevIndex =  index  - "1"  %}
            {% else %}
              {% set prevIndex =  index  - "1"  %}
              {% set nextIndex =  index + "1" %}
            {% endif %}

            <div class="uw-lightbox__prev-next">