squirrel/layouts/partials/slider.html

{{- $slider := .slider }}
{{ $length := len $slider.images }}
{{ $template := resources.Get "scss/slider.scss" }}
<div id="{{ $slider.id }}" class="slider">
    {{ if gt $length 1}}
    <div class=slide-links>
        {{- range $index, $slide := $slider.images}}
        <a class="slide-link {{if eq $index 0}} slide-link-active {{end}}" onclick="scrollToSlide({{$index}})"></a>
        {{ end }}
    </div>
    {{ end }}
    <div class="slides">
        {{- range $index, $slide := $slider.images}}
        <div class="slide">
            <img src="{{ $slide }}" alt="{{ $index }}">
            {{ if gt $length 1}}
            <span class="slider-navigation-right" onclick="scrollToNextSlideNr({{$index}})">
                <i class="fas fa-angle-right"></i>
            </span>
            <span class="slider-navigation-left" onclick="scrollToPrevSlideNr({{$index}})">
                <i class="fas fa-angle-left"></i>
            </span>
            {{ end }}
        </div>
        {{- end }}
    </div>
</div>
<script src="/js/slider.js"></script>
{{ if gt $length 1}}
<script>
    window.setInterval(scrollToNextSlide, 10000)
</script>
{{ end }}