gcg-website/layouts/shortcodes/slider.html

76 lines
2.0 KiB
HTML

<div class="img-slider">
{{- with (.Get "dir") -}}
{{- $files := readDir (print "/static/" .) }}
{{- range $index, $file := $files -}}
{{- $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
{{- if $isimg }}
{{- $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
<div class="is-slide {{if eq $index 0 }}active{{end}}">
<img src="{{ $linkURL }}" alt="">
</div>
{{- end }}
{{- end }}
{{- end }}
<div class="is-navigation">
<div class="is-btn active"></div>
<div class="is-btn"></div>
<div class="is-btn"></div>
<div class="is-btn"></div>
</div>
</div>
<script type="text/javascript">
var slides = document.querySelectorAll('.is-slide');
var btns = document.querySelectorAll('.is-btn');
let currentSlide = 1;
// Javascript for image slider manual navigation
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
btns.forEach((btn) => {
btn.classList.remove('active');
});
});
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
manualNav(i);
currentSlide = i;
});
});
// Javascript for image slider autoplay navigation
var repeat = function(activeClass){
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function(){
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
btns[i].classList.add('active');
i++;
if(slides.length == i){
i = 0;
}
if(i >= slides.length){
return;
}
repeater();
/// Time in ms
}, 5000);
}
repeater();
}
repeat();
</script>