rabeweb/website
9
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Startseite Slideshow implementiert

Browse source
This commit is contained in:
Andreas Hnida 2024-02-15 13:10:07 +00:00
commit 141a4accc9
13 changed files with 86 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

55
themes/hugoplate/layouts/index.html
View file

@ -2,26 +2,53 @@
{{ define "main" }}
<!-- Banner -->
<section class="hero-slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<section class="hero-slider h-screen md:h-[750px]">
<div class="verua-slider-wrapper">
<div class="verua-slider" id="verua-slider">
{{ range $i, $e:= .Params.heroslider }}
<div class="swiper-slide">
<div class="bg-cover bg-center h-screen" style="background-image: url('{{ .image }}')">
<div class="container h-full flex items-center">
<div class="col-12 text-center">
<h1 class="text-h1 lg:text-h1 font-primary font-semibold mb-4">
{{ .title | markdownify }}
</h1>
</div>
</div>
</div>
<div class="slides {{ if (eq $i 0) }}current{{ end }}" style="background-image:url('{{ .image }}')">
<h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl">
{{ .title | markdownify }}
</h1>
</div>
{{ end }}
</div>
</div>
</section>
<script>
window.onload = function(){
// change slide every 5 seconds
setInterval(nextSlide, 5000);
}
let slideNumber = 0;
const prevSlide = () =>{
const slides = document.getElementsByClassName('slides');
const slider = document.getElementById("verua-slider");
const currentSlide = slider.getElementsByClassName('current');
currentSlide[0].classList.remove("current");
if(slideNumber == 0){
slideNumber = slides.length-1;
}
else{
slideNumber = slideNumber-1;
}
slides[slideNumber].classList.add("current");
}
const nextSlide = () =>{
const slides = document.getElementsByClassName('slides');
const slider = document.getElementById("verua-slider");
const currentSlide = slider.getElementsByClassName('current');
currentSlide[0].classList.remove("current");
if(slideNumber == (slides.length-1)){
slideNumber = 0;
}
else{
slideNumber = slideNumber+1;
}
slides[slideNumber].classList.add("current");
}
</script>
{{ with .Params.banner }}
<section class="section pt-14">