{{- $images := resources.Match "banner/*" -}}
{{- $first := true -}}
{{- range $images }}
    {{- $img := .Fit "1220x340 webp" -}}
    {{ if $first }}
        <img src="{{ $img.RelPermalink }}" class="placeholder">
        {{ $first = false }}
    {{ end }}
    <img src="{{ $img.RelPermalink }}" class="hidden slider-img">
{{ end -}}
<div class="dots">
    {{- $count := (len $images) -}}
    {{- $first := true -}}
    {{- range (seq 0 (sub $count 1)) }}
        <div data-index="{{ . }}" class="dot {{ if $first }}active{{ end }}"></div>
        {{ $first = false }}
    {{- end }}
</div>
<script>
    const numImages = {{ $count }};
</script>
<script defer src="{{ relURL "js/slider.js" }}"></script>