{{/*  TODO ADD S M L Modes  */}}
{{/*  TODO FIX HEIGHT ISSUE   */}}
{{/*  TODO FIX Slider Height on Mobile when no Headline is given   */}}
<section class="hero-slider h-screen md:h-[750px]">
<div class="verua-slider-wrapper">
<div class="verua-slider h-screen md:h-[750px]" id="verua-slider">
{{ .Inner  }}
</div>
</div>
</section>
<script>
window.onload = function(){
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>
<!-- /Hero Slider -->