Startseite Slideshow implementiert

assets/scss/custom.scss

@@ -1,17 +1,27 @@
-.slider-wrapper {
+// Custom Fonts
+@font-face {
+    font-family: "MontserratVar";
+    src: url( '../fonts/Montserrat-VariableFont_wght.ttf' );
+}
+@font-face {
+    font-family: "OpenSansVar";
+    src: url( '../fonts/MOpenSans-VariableFont_wdth_wght.ttf' );
+}
+
+.verua-slider-wrapper {
     position: relative;
     height: 100vh;
     width: 100%;
     color: #fff;
 }
 
-.slider-wrapper .slider {
+.verua-slider-wrapper .verua-slider {
     position: relative;
     height: 100vh;
     width: 100%;
 }
 
-.slider-wrapper .slider .slides {
+.verua-slider-wrapper .verua-slider .slides {
     position: absolute;
     height: 100%;
     width: 100%;
@@ -24,12 +34,12 @@
     transition: 0.3s ease-in-out;
 }
 
-.slider-wrapper .slider .slides.current {
+.verua-slider-wrapper .verua-slider .slides.current {
     z-index: 1;
     opacity: 1;
 }
 
-.slider-wrapper .slider .slides:nth-child(1) {
+.verua-slider-wrapper .verua-slider .slides:nth-child(1) {
     background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2339009/pexels-photo-2339009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
     background-size: cover;
     background-attachment: fixed;
@@ -37,7 +47,7 @@
     background-repeat: no-repeat;
 }
 
-.slider-wrapper .slider .slides:nth-child(2) {
+.verua-slider-wrapper .verua-slider .slides:nth-child(2) {
     background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2303337/pexels-photo-2303337.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
     background-size: cover;
     background-attachment: fixed;
@@ -45,7 +55,7 @@
     background-repeat: no-repeat;
 }
 
-.slider-wrapper .slider .slides:nth-child(3) {
+.verua-slider-wrapper .verua-slider .slides:nth-child(3) {
     background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2346091/pexels-photo-2346091.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
     background-size: cover;
     background-attachment: fixed;
@@ -53,7 +63,7 @@
     background-repeat: no-repeat;
 }
 
-.slider-wrapper .slider .slides:nth-child(4) {
+.verua-slider-wrapper .verua-slider .slides:nth-child(4) {
     background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/1168764/pexels-photo-1168764.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
     background-size: cover;
     background-attachment: fixed;
@@ -61,7 +71,7 @@
     background-repeat: no-repeat;
 }
 
-.slider-wrapper .slider .slides:nth-child(5) {
+.verua-slider-wrapper .verua-slider .slides:nth-child(5) {
     background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
     background-size: cover;
     background-attachment: fixed;
@@ -69,14 +79,15 @@
     background-repeat: no-repeat;
 }
 
-.slider-wrapper .slider .slides h1 {
+.verua-slider-wrapper .verua-slider .slides h1 {
-    font-size: 3em;
+    font-family: "MontserratVar" !important;
-    font-weight: 600;
+    font-weight:700;
+    color: white;
     text-shadow: 0px 0.5px 12px rgba(0, 0, 0, 0.9);
     transition: 0.3s linear;
 }
 
-.slider-wrapper .slider .slides.current h1 {
+.verua-slider-wrapper .verua-slider .slides.current h1 {
     animation: animateHeading 0.3s linear forwards 1;
     animation-delay: 0.2s;
     opacity: 0;
@@ -88,13 +99,13 @@
     }
 }
 
-.slider-wrapper .slider .slides p {
+.verua-slider-wrapper .verua-slider .slides p {
     text-shadow: 0px 0.5px 5px rgba(0, 0, 0, 0.5);
     transition: 0.3s linear;
     opacity: 0;
 }
 
-.slider-wrapper .slider .slides.current p {
+.verua-slider-wrapper .verua-slider .slides.current p {
     animation: animateparagraph 0.3s linear forwards 1;
     animation-delay: 0.2s;
 }
@@ -105,7 +116,7 @@
     }
 }
 
-.slider-wrapper .prev {
+.verua-slider-wrapper .prev {
     position: fixed;
     color: #fff;
     top: 50%;
@@ -125,7 +136,7 @@
     box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.9);
 }
 
-.slider-wrapper .next {
+.verua-slider-wrapper .next {
     position: fixed;
     color: #fff;
     top: 50%;
@@ -145,13 +156,13 @@
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 }
 
-.slider-wrapper .prev:hover,
+.verua-slider-wrapper .prev:hover,
-.slider-wrapper .next:hover {
+.verua-slider-wrapper .next:hover {
     background: #16a085;
     border-color: #16a085;
 }
 
-.slider-wrapper a {
+.verua-slider-wrapper a {
     position: fixed;
     color: #fff;
     bottom: 15%;
@@ -174,6 +185,6 @@
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 }
 
-.slider-wrapper a:hover {
+.verua-slider-wrapper a:hover {
     background: #017f
 }

content/german/_index.md

@@ -2,21 +2,21 @@
 # Hero Slider
 heroslider:
   - title: "Willkommen auf unserer Homepage!"
-    image: "/images/startseite/startseite-slide-1.jpg"
+    image: "startseite/startseite-slide.jpg"
   - title: "Gemeinsam neue Wege gehen."
-    image: "/images/startseite/startseite-slide-2.jpg"
+    image: "startseite/startseite-slide-2.jpg"
   - title: "Administration optimieren, Zeit gewinnen."
-    image: "/images/startseite/startseite-slide-3.jpg"
+    image: "startseite/startseite-slide-3.jpg"
 
 # Banner
-banner:
+# banner:
-  title: "Das ultimative Starter Template "
+#   title: "Das ultimative Starter Template "
-  content: "Hugoplate is a free starter template built with Hugo and TailwindCSS, providing everything you need to jumpstart your Hugo project and save valuable time."
+#   content: "Hugoplate is a free starter template built with Hugo and TailwindCSS, providing everything you need to jumpstart your Hugo project and save valuable time."
-  image: "/images/banner.png"
+#   image: "/images/banner.png"
-  button:
+#   button:
-    enable: true
+#     enable: true
-    label: "Get Started For Free"
+#     label: "Get Started For Free"
-    link: "https://github.com/zeon-studio/hugoplate"
+#     link: "https://github.com/zeon-studio/hugoplate"
 
 # Features
 features:

data/theme.json

@@ -17,9 +17,9 @@
   },
   "fonts": {
     "font_family": {
-      "primary": "Heebo:wght@400;600",
+      "primary": "OpenSansVar:wght@400;600",
       "primary_type": "sans-serif",
-      "secondary": "Signika:wght@500;700",
+      "secondary": "MontserratVar:wght@500;700",
       "secondary_type": "sans-serif"
     },
     "font_size": { "base": "16", "scale": "1.250" }

themes/hugoplate/layouts/index.html

@@ -2,26 +2,53 @@
 {{ define "main" }}
   <!-- Banner -->
 
-    <section class="hero-slider">
+    <section class="hero-slider h-screen md:h-[750px]">
-      <div class="swiper-container">
+      <div class="verua-slider-wrapper">
-        <div class="swiper-wrapper">
+        <div class="verua-slider" id="verua-slider">
           {{ range $i, $e:= .Params.heroslider }}
-            <div class="swiper-slide">
+            <div class="slides {{ if (eq $i 0) }}current{{ end }}" style="background-image:url('{{ .image }}')">
-              <div class="bg-cover bg-center h-screen" style="background-image: url('{{ .image }}')">
+                    <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl">
-                <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>
           {{ 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">