simple-slideshow.html

{{ $imgs := .Page.Resources.ByType "image" }}
{{ if .Get "dir"}}
	{{ $imgs = .Page.Resources.Match (.Get "dir") }}
{{ end }}

{{ $icon := resources.Get (.Get "icon" | default "svg/simple-slideshow-arrow.svg") }}
{{ $sortOrder := .Get "sortOrder" | default "asc" }}
{{ $loopImages := .Get "loopImages" | default false }}
{{ $topSlideBar := .Get "topSlideBar" | default true }}
{{ $scrollIntoView := .Get "scrollIntoView" | default true }}
{{ $maxThumbnailHeight := .Get "maxThumbnailHeight" | default 150 }}

{{ $id := now.UnixNano }}

{{ with $imgs }}
<style>
    .simple-slideshow-slides-{{$id}} {
        margin-bottom: 5px;
        overflow-x: scroll;
        white-space: nowrap;

        /* works by rotating the container... */
        {{ if $topSlideBar }} 
        transform: rotateX(180deg);
        {{ end }}
    }
    .simple-slideshow-slide-{{$id}} {
        transition: opacity .3s ease-out;

        /* ...and the imgs */
        {{ if $topSlideBar }}
        transform: rotateX(180deg);
        {{ end }}
    }

    .simple-slideshow-slide-{{$id}}:hover {
        cursor: pointer;
        opacity: .5;
    }

    .simple-slideshow-imgs-container-{{$id}} {
        position: relative;
    }

    .simple-slideshow-arrow-{{$id}} {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
    }

    .simple-slideshow-arrow-{{$id}}:hover {
        cursor: pointer;
    }

    .right-arrow-{{$id}} {
        transform: translateY(-50%) rotateZ(180deg);
        right: 0;
    }

    .simple-slideshow-img-{{$id}} {
        max-width: 100%;
        margin: auto;
    }
</style>

{{ $showPrevious := safeJS (print "showPrevious_" $id) }}
{{ $showNext := safeJS (print "showNext_" $id) }}
{{ $showSlide := safeJS (print "showSlide_" $id) }}

<div class="simple-slideshow-container-{{$id}}">
    <div class="simple-slideshow-slides-{{$id}}">
        {{ range $index, $img := sort . "Title" $sortOrder }}
            {{ $thumbnail := $img.Fit (print 9999 "x" $maxThumbnailHeight) }}
            <img class="simple-slideshow-slide-{{$id}}" src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" onclick="{{ $showSlide }}({{ $index }})">
        {{ end }}
    </div>
    <div class="simple-slideshow-imgs-{{$id}}">
        <div class="simple-slideshow-imgs-container-{{$id}}">
            <img src="{{ $icon.RelPermalink }}" class="simple-slideshow-arrow-{{$id}}" onclick="{{ $showPrevious }}()"/>
            <img src="{{ $icon.RelPermalink }}" class="simple-slideshow-arrow-{{$id}} right-arrow-{{$id}}" onclick="{{ $showNext }}()"/>
            {{ range $img := . }}
            <img src="{{ $img.RelPermalink }}" style="display: none; aspect-ratio: {{ $img.Width }} / {{ $img.Height }};" class="simple-slideshow-img-{{$id}}" loading="lazy">
            {{ end }}
            </div>
    </div>
</div>

{{ $imgs := safeJS (print "img_" $id) }}
{{ $curIndex := safeJS (print "curIndex_" $id) }}

<script>
    const {{ $imgs }} = Array.from(document.getElementsByClassName("simple-slideshow-img-{{$id}}"))
        .sort((a,b) => {{ $sortOrder }} === 'asc' ? a.src > b.src : a.src < b.src);
    let {{ $curIndex }} = 0;

    {{ $imgs }}[0].style.display = "block";

    function {{ $showPrevious }}() {
        {{ $showSlide }}({{ $curIndex }} - 1);
    }

    function {{ $showNext }}() {
        {{ $showSlide }}({{ $curIndex }} + 1);
    }

    function {{ $showSlide }}(n) {

        {{ if $loopImages }}
        if (n < 0)
            n = {{ $imgs }}.length - 1;
        else if (n > {{ $imgs }}.length -1)
            n = 0;
        {{ else }}
        if (n < 0 || n > {{ $imgs }}.length-1)
            return;
        {{ end }}

        {{ $imgs }}[{{ $curIndex }}].style.display = "none";
        {{ $imgs }}[n].style.display = "block";
        {{ $curIndex }} = n;

        {{ if $scrollIntoView }}
        setTimeout( // eliminates the time between waiting for img and scrolling.
            () => {{ $imgs }}[{{ $curIndex }}].scrollIntoView({ behavior: "smooth", block: "center" }),
            150);
        {{ end }}
    }
</script>
{{ end }}