Add pullover slider

content/static-pages/service-merchandise.htm

@@ -7,6 +7,7 @@ navigation_hidden = 1
 articles[0][content] = "<p>Simpel, Stabil, Schick, Schwarz und hochwertig verarbeitet. Mit dem Stammeswappen auf der Brust und dem Neuen Stammes-Logo auf dem Rückenein wahrer Hingucker. Das Vegane T-Shirt wird unter fairen Arbeisbedingungen hergestellt und lokal in Wald bedruckt. Es besteht zu 100% aus Baumwolle mit einem Stoffgewicht von 190g/m². Dadurch ist sehr dick, stabil und Perfekt für das Tragen bei Sommerlichen Pfadfinderaktionen geeignet, bei welchen die Kluft zu warm ist.</p>"
 articles[0][price] = "30,00 €"
 articles[0][image] = "/seiten/t-shirt-m.jpg"
+articles[0][image2] = ""
 articles[0][title] = "T-Shirt"
 articles[1][content] = "<p>Warm und Dick schützt unser Pullover vor fast jedem Wetter. Hochwertig und Kuschelig präsentiert unser Stammespullover sich in einem leichten Oversized Look. Ausgewählt durch persönliche Erfahrung mit dem Textil ist der Silva-Pullover in gemütlichkeit nicht zu Überbieten.</p>
 
@@ -15,12 +16,14 @@ articles[1][content] = "<p>Warm und Dick schützt unser Pullover vor fast jedem
 <p>Natürlich wird auch der Pullover von unserem Stammeswappen auf der Vorder- und von unserem Stammeslogo auf der Rückseite geschmückt.</p>"
 articles[1][price] = "50,00 €"
 articles[1][image] = "/seiten/pullover-jh120-vorne.jpg"
+articles[1][image2] = "/seiten/pullover-jh120-hinten.jpg"
 articles[1][title] = "Pullover"
 articles[2][content] = "<p>Natürlich haben wir auch an die kleinen im Stamm gedacht. Das Kinder T-Shirt mit ebenfalls 190 g/m² wird aus dem gleichen Stoff gefertigt wie sein großer Bruder. Auch hier wird das Vegane T-Shirt fairen Arbeisbedingungen hergestellt, lokal in Wald bedruckt und besteht aus 100% baumwolle.</p>
 
 <p>So können auch die kleinsten Pfadfinder stolz das Stammeswappen und Logo präsentieren.</p>"
 articles[2][price] = "25,00 €"
 articles[2][image] = "/seiten/t-shirt-m.jpg"
+articles[2][image2] = ""
 articles[2][title] = "Kinder T-Shirt"
 header_image = "header/weinberg.jpg"
 show_submenu = 0

layouts/merch.htm

@@ -22,8 +22,9 @@ code=footmenu
             {richeditor name="content" label="Inhalt" hidden}{/richeditor}
             {text name="price" label="Preis" hidden}{/text}
             {mediafinder name="image" label="Bild"}{/mediafinder}
+            {mediafinder name="image2" label="Bild 2"}{/mediafinder}
         </div>
-        <div class="flex flex-col md:flex-row mt-10 first:mt-0">
+        <div class="flex flex-col md:flex-row mt-10 first:mt-0 items-start">
             <div class="mr-5">
                 <div class="prose max-w-none">
                     <h2>{text name="title" label="Titel"}{/text}</h2>
@@ -36,8 +37,40 @@ code=footmenu
                     Zur Bestellung
                 </a>
             </div>
-            <img {{fields.image | resize('original')}} class="w-64 h-auto border-red-700 border-solid border-2 rounded">
+            <div class="w-64 flex-none border-red-700 border-solid border-2 rounded">
+                {% if not fields.image2 %}
+                    <img {{fields.image | resize('original')}} class="w-full h-auto">
+                {% else %}
+                    <div x-data="carousel([
+                        {
+                            imgSrc: '{{fields.image|media}}',
+                        },
+                        {
+                            imgSrc: '{{fields.image2|media}}',
+                        },
+                    ])" x-init="autoplay" class="relative w-full overflow-hidden">
+                        <div class="relative min-h-[60svh] w-full">
+                            <template x-for="(slide, index) in slides">
+                                <div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
+                                    <img class="absolute w-full h-auto inset-0 object-cover" x-bind:src="slide.imgSrc" />
+                                </div>
+                            </template>
+                        </div>
+
+                        <!-- indicators -->
+                        <div class="absolute rounded-md bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 px-1.5 py-1 md:px-2" role="group" aria-label="slides" >
+                            <template x-for="(slide, index) in slides">
+                                <button class="size-2 rounded-full transition" x-on:click="(currentSlideIndex = index + 1), setAutoplayInterval(autoplayIntervalTime)" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-blue-300' : 'bg-blue-300/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
+                            </template>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
         </div>
     {/repeater}
+
+
+
+
 </div>
 {% partial 'shared/foot' %}

resources/js/app.js

@@ -3,6 +3,43 @@ import Alpine from 'alpinejs';
 
 window.Alpine = Alpine;
 
-document.addEventListener('alpine:init', () => {});
+document.addEventListener('alpine:init', () => {
+    Alpine.data('carousel', (slides) => ({
+        slides,
+        autoplayIntervalTime: 4000,
+        currentSlideIndex: 1,
+        isPaused: false,
+        autoplayInterval: null,
+        previous() {
+            if (this.currentSlideIndex > 1) {
+                this.currentSlideIndex = this.currentSlideIndex - 1
+            } else {
+                // If it's the first slide, go to the last slide
+                this.currentSlideIndex = this.slides.length
+            }
+        },
+        next() {
+            if (this.currentSlideIndex < this.slides.length) {
+                this.currentSlideIndex = this.currentSlideIndex + 1
+            } else {
+                // If it's the last slide, go to the first slide
+                this.currentSlideIndex = 1
+            }
+        },
+        autoplay() {
+            this.autoplayInterval = setInterval(() => {
+                if (!this.isPaused) {
+                    this.next()
+                }
+            }, this.autoplayIntervalTime)
+        },
+        // Updates interval time
+        setAutoplayInterval(newIntervalTime) {
+            clearInterval(this.autoplayInterval)
+            this.autoplayIntervalTime = newIntervalTime
+            this.autoplay()
+        },
+    }));
+});
 
 Alpine.start();