hugo-theme-zzo/layouts/partials/header/header-slide.html

65 lines
2.4 KiB
HTML

{{ $swipe := resources.Get "js/swipehome.js" | resources.Minify | resources.Fingerprint }}
<script defer src="{{ $swipe.RelPermalink }}"></script>
{{ if $.Params.header }}
<div id="headerSwipe" class="swipe">
<div class="swipe-home">
{{ range $.Params.header }}
{{ if eq .type "slide" }}
{{ $height := .height }}
{{ range .slide }}
<div class="site-header__align-{{ .align }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}" style="background-image: url('{{ .imageSrc | relURL }}'); background-size: {{ .imageSize }}; background-repeat: {{ .imageRepeat }}; background-position: {{ .imagePosition }}; height: {{ $height }}px;">
{{ $header := . }}
{{ if .title }}
{{ range .title }}
<div class="site-header__title" style="font-size: {{ $header.titleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
{{ . }}
</div>
{{ end }}
{{ end }}
{{ if .spaceBetweenTitleSubtitle }}
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
{{ end }}
{{ if .subtitle }}
{{ range .subtitle }}
<div class="site-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
{{ . }}
</div>
{{ end }}
{{ end }}
</div>
{{ end }}
{{ end }}
{{ end }}
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
{{ $header := $.Params.header }}
var options = null;
var header = JSON.parse({{ $header | jsonify }});
var slide = header.filter(function(h) {
return h.type === 'slide';
});
if (slide.length > 0) {
options = slide[0].options;
}
var headerSwipeElem = document.getElementById('headerSwipe');
var headerSwipe = new Swipe(headerSwipeElem,
options ?
options : {
startSlide: 0,
auto: 7000,
draggable: true,
autoRestart: true,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function (index, element) { },
transitionEnd: function (index, element) { }
});
});
</script>
{{ end }}