Add transition duration setting for SlideshowExt

blueprints/modular/slideshowext.yaml

@@ -5,6 +5,14 @@ extends@:
 form:
   validation: loose
   fields:
+    header.transduration:
+      type: text
+      label: Übergangsdauer
+      help: 'Dauer des Übergangs (Fade-In bzw. -Out) zwischen zwei Slides in Sekunden'
+      default: 2
+      validate:
+        required: true
+        type: int
     header.slides:
       type: list
       style: vertical

css/slideshowext.css

@@ -19,7 +19,6 @@
     width: 100%;
     height: auto;
     overflow: hidden;
-    transition: visibility 0s 2s, opacity 2s linear;
     box-sizing: border-box;
     white-space: normal;
     justify-content: center;

templates/modular/slideshowext.html.twig

@@ -4,10 +4,14 @@
     {% do assets.addCss('theme://css/slideshowext.css', 90) %}
     {% set slideStyle %}
         {% for image in slides %}
+            .slideshow-ext > .slide-content {
+                transition: visibility 0s {{ page.header.transduration }}s, opacity {{ page.header.transduration }}s linear;
+            }
+
             #slide{{ loop.index }}:checked ~ #slide-content{{ loop.index }} {
                 opacity: 1;
                 visibility: visible;
-                transition: visibility 0s 2s, opacity 2s 2s linear;
+                transition: visibility 0s {{ page.header.transduration }}s, opacity {{ page.header.transduration }}s {{ page.header.transduration }}s linear;
             }
         {% endfor %}
         {% for image in slides %}