carousel.html

{{- $is_carousel := false -}}
{{ if gt (len .images) 1 }}
  {{- $is_carousel = true -}}
{{ end }}

{{- if $is_carousel }}
<div class="splide" role="group" data-splide='{"arrows":true,"pagination":false,"autoWidth":true,"autoplay":false}'>
  <div class="splide__track">
    <div class="splide__list">
{{ end -}}

  {{ range .images }}
    {{ if .file }}
      {{- $image := partial "GetMedia" .file -}}
      {{- if $image -}}
        <figure {{ if $is_carousel }} class="splide__slide"{{ end }}>
          {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
            <a  class="glightbox"
                role="button"
                data-glightbox="type: image;{{ if .credit }}description: {{ partial "PrepareHTML" .credit }}{{ end }}"
                href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
                title="{{- i18n "commons.lightbox.link.title" -}}"
                aria-label="{{- i18n "commons.lightbox.link.title" -}}">
          {{ end }}
              {{ partial "commons/image.html"
                (dict
                  "image"    .id
                  "alt"      .alt
                  "sizes"    site.Params.image_sizes.blocks.gallery.carousel
                )}}
          {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
            </a>
          {{ end }}
          {{ if or .text .credit }}
            <figcaption>
              {{ if .text }}
                <p>{{ partial "PrepareText" .text }}</p>
              {{ end }}
              {{ if .credit }}
                <div class="credit">{{ partial "PrepareText" .credit }}</div>
              {{ end }}
            </figcaption>
          {{ end }}
        </figure>
      {{- end -}}
    {{ end }}
  {{ end }}

{{- if $is_carousel }}
    </div>
  </div>
</div>
{{ end -}}