67 lines
1.9 KiB
HTML
67 lines
1.9 KiB
HTML
{{ $swiper_style := resources.Get "lib/swiper/swiper.min.css" | resources.Fingerprint }}
|
|
<link rel="stylesheet" href="{{ $swiper_style.RelPermalink }}">
|
|
{{ $swiper_script := resources.Get "lib/swiper/swiper.min.js" | resources.Fingerprint }}
|
|
<script defer src="{{ $swiper_script.RelPermalink }}"></script>
|
|
|
|
{{ $id := substr (md5 .Inner) 0 16 }}
|
|
{{ $enableNavigation := .Get "enableNavigation" }}
|
|
{{ $enablePagination := .Get "enablePagination" }}
|
|
|
|
<div id="{{ $id }}" class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slides -->
|
|
{{ .Inner }}
|
|
</div>
|
|
|
|
{{ if $enablePagination }}
|
|
<div class="swiper-pagination"></div>
|
|
{{ end }}
|
|
|
|
{{ if $enableNavigation }}
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
{{ $swiper := .Site.Data.swiper }}
|
|
var options = JSON.parse({{ $swiper | jsonify }});
|
|
{{ $optionName := .Params.option }}
|
|
var optionName = JSON.parse({{ $optionName | jsonify }});
|
|
|
|
var id = JSON.parse({{ $id | jsonify }});
|
|
var enableNavigation = JSON.parse({{ $enableNavigation | jsonify }});
|
|
var enablePagination = JSON.parse({{ $enablePagination | jsonify }});
|
|
|
|
if (optionName) {
|
|
var parsedOptions = Object.assign({}, options[optionName]);
|
|
}
|
|
|
|
if (optionName && enablePagination) {
|
|
parsedOptions.pagination = {
|
|
el: '.swiper-pagination',
|
|
};
|
|
}
|
|
|
|
if (optionName && enableNavigation) {
|
|
parsedOptions.navigation = {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
};
|
|
}
|
|
|
|
if (enableNavigation) {
|
|
var allSlideElem = document.querySelectorAll('.swiper-slide__inner');
|
|
allSlideElem ?
|
|
allSlideElem.forEach(function (slideElem) {
|
|
slideElem.style.padding = '0 40px';
|
|
}) : null;
|
|
}
|
|
|
|
var mySwiper = new Swiper('#' + id, parsedOptions);
|
|
|
|
});
|
|
</script> |