squirrel/layouts/partials/slider.html

44 lines
No EOL
1.5 KiB
HTML

{{- $slider := .slider }}
{{- $color := .color }}
{{ $length := len $slider.images }}
{{- $id := "slider"}}
{{if $slider.id}}
{{- $id := $slider.id}}
{{else if .id}}
{{- $id := .id }}
{{end}}
{{ $template := resources.Get "scss/slider.scss" }}
{{ if $template }}
{{ $index := $template | resources.ExecuteAsTemplate "css/slider.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
<link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
{{ end }}
<div id="{{ $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="icon-angle-right"></i>
</span>
<span class="slider-navigation-left" onclick="scrollToPrevSlideNr({{$index}})">
<i class="icon-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 }}