✨Anwendungen und Blöcke, erstellt mit der Hilfe von der KI ChatGPT

[hansjuerg]

Hallo Tommy

Mir ist gerade aufgefallen, dass bei deinem Slider-Block, die Farbe beim Subtile nicht geändert werden kann.
Beim Titel funktioniert das.

Ich kann jetzt KI fragen, aber da es "dein" Block ist, möchte ich nicht hineinpfuschen.

[Tommy Herrmann]

Moin,

ja - herzlichen Dank

Da hat mir ChatGPT, ohne dass ich es merken konnte, mal wieder einen Streich gespielt. Das ging ja schon, sonst hätte ich die Farben ja gar nicht in Weiß ändern können.

Ich habe das bei allen drei Slidern jetzt korrigiert. Bitte lade die .mbrext-Datei (unter dem Slider) zum erneuten Import als Block-Erweiterung herunter:

https://www.mobirise-tutorials.com/AI-B ... er-ChatGPT

[hansjuerg]

Super - vielen Dank

[Tommy Herrmann]

Der Slider "springt" bei Dir er ist nicht so gedacht, dass Du in den 3 Gruppen unterschiedliche Bilder verwendest. Er ist so gedacht, dass die gleichen (hier 6) Bilder sich dreimal wiederholen. Dann springt auch nichts.

Wolltest Du mehr unterschiedliche Bilder, dass füge meinetwegen z.B. 15 Bilder in der ersten Gruppe ein und kopiere diese dann in beide anderen Gruppen, sodass Du 3 x 15 Bilder hättest.

https://www.mobirise-tutorials.com/AI-B ... r-Hinweise

Die Gruppen sind dafür gedacht, das sich die Anzeige nahtlos wiederholt. Die Anzahl der Bilder wird also von einer Gruppe bestimmt und dann zweimal wiederholt.


Bei nur 6 Bildern also dreimal die gleichen 6 Bilder:

Code: Alles auswählen

                <!-- Gruppe 1 -->
                 <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="assets/images/buis-les-baronnies-5-1000x750.jpg" alt="vmcu"></div>
                    <div class="ai-slide-item"><img src="assets/images/lavendelfeld.webp" alt="Lavendel"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-2026.jpg" alt="AI Bild 3"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-14-875.jpg" alt="AI Bild 4"></div>
                    <div class="ai-slide-item"><img src="assets/images/preview.jpg" alt="AI Bild 5"></div>
                    <div class="ai-slide-item"><img src="assets/images/16-24-1600x1200.jpg" alt="AI Bild 6"></div>
                </div>

                <!-- Gruppe 2 -->
                <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="assets/images/buis-les-baronnies-5-1000x750.jpg" alt="vmcu"></div>
                    <div class="ai-slide-item"><img src="assets/images/lavendelfeld.webp" alt="Lavendel"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-2026.jpg" alt="AI Bild 3"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-14-875.jpg" alt="AI Bild 4"></div>
                    <div class="ai-slide-item"><img src="assets/images/preview.jpg" alt="AI Bild 5"></div>
                    <div class="ai-slide-item"><img src="assets/images/16-24-1600x1200.jpg" alt="AI Bild 6"></div>
                </div>

                <!-- Gruppe 3 -->
                <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="assets/images/buis-les-baronnies-5-1000x750.jpg" alt="vmcu"></div>
                    <div class="ai-slide-item"><img src="assets/images/lavendelfeld.webp" alt="Lavendel"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-2026.jpg" alt="AI Bild 3"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-14-875.jpg" alt="AI Bild 4"></div>
                    <div class="ai-slide-item"><img src="assets/images/preview.jpg" alt="AI Bild 5"></div>
                    <div class="ai-slide-item"><img src="assets/images/16-24-1600x1200.jpg" alt="AI Bild 6"></div>
                </div>

---

Mehr als 6 Bilder:

Damit der Loop nicht springt, müssen alle Gruppen exakt denselben Bildsatz in derselben Reihenfolge enthalten.

Bei zum Beispiel 15 unterschiedlichen Bildern brauchst Du also:

Code: Alles auswählen

Gruppe 1: Bild 1–15
Gruppe 2: Bild 1–15
Gruppe 3: Bild 1–15

Ich verwende hier deshalb 3 Gruppen, damit auch bei wenigen Bildern, wie zum Beispiel 6 Bildern, der Bildschirm komplett gefüllt wird, denn sonst würde es keinen nahtlosen Übergang geben und der Slider würde am Bildschirm optisch "springen". Daher ist nun auch die CSS an diese 3 Gruppen angepasst.

Wichtig:

Der CSS-Wert bleibt bei drei identischen Gruppen:

Code: Alles auswählen

transform: translateX(-33.333333%);

Denn der Track besteht aus 3 gleichen Gruppen. Nach einem Drittel ist Gruppe 2 exakt dort, wo vorher Gruppe 1 war — deshalb wirkt der Übergang nahtlos.

Für den gegenläufigen Slider gilt dasselbe:

Code: Alles auswählen

@keyframes aiScrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333333%);
  }
}

@keyframes aiScrollRight {
  from {
    transform: translateX(-33.333333%);
  }
  to {
    transform: translateX(0);
  }
}

Also: Bei 15 Bildern einfach in jeder der 3 Gruppen dieselben 15 Bilder eintragen.

[Tommy Herrmann]

Wolltest Du also Deine jetzigen 18 Bilder nahtlos zeigen, dann in 3 Gruppen - also so - kopiere den Code einfach hier und ersetze im Code-Editor Deinen Code dieser 3 Gruppen:

Code: Alles auswählen

                 <!-- Gruppe 1 -->
                 <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="assets/images/buis-les-baronnies-5-1000x750.jpg" alt="AI Bild 1"></div>
                    <div class="ai-slide-item"><img src="assets/images/lavendelfeld.webp" alt="AI Bild 2"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-2026.jpg" alt="AI Bild 3"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-14-875.jpg" alt="AI Bild 4"></div>
                    <div class="ai-slide-item"><img src="assets/images/preview.jpg" alt="AI Bild 5"></div>
                    <div class="ai-slide-item"><img src="assets/images/16-24-1600x1200.jpg" alt="AI Bild 6"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-01-340.jpg" alt="AI Bild 7"></div>
                    <div class="ai-slide-item"><img src="assets/images/28-25a-1.jpg" alt="AI Bild 8"></div>
                    <div class="ai-slide-item"><img src="assets/images/4-tta.jpg" alt="AI Bild 9"></div>
                    <div class="ai-slide-item"><img src="assets/images/vmcu-mit-corinne-816x612.jpg" alt="AI Bild 10"></div>
                    <div class="ai-slide-item"><img src="assets/images/30-25a.jpg" alt="AI Bild 11"></div>
                    <div class="ai-slide-item"><img src="assets/images/denia-11.png" alt="AI Bild 12"></div>
                    <div class="ai-slide-item"><img src="assets/images/vewoa.jpg" alt="AI Bild 13"></div>
                    <div class="ai-slide-item"><img src="assets/images/03-24a-2576x1446.jpg" alt="AI Bild 14"></div>
                    <div class="ai-slide-item"><img src="assets/images/titel-neu.png" alt="AI Bild 15"></div>
                    <div class="ai-slide-item"><img src="assets/images/skitag-19-808x606.jpg" alt="AI Bild 16"></div>
                    <div class="ai-slide-item"><img src="assets/images/25-25c.jpg" alt="AI Bild 17"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-25.jpg" alt="AI Bild 18"></div>                        
                </div>

                <!-- Gruppe 2 -->
                <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="assets/images/buis-les-baronnies-5-1000x750.jpg" alt="AI Bild 1"></div>
                    <div class="ai-slide-item"><img src="assets/images/lavendelfeld.webp" alt="AI Bild 2"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-2026.jpg" alt="AI Bild 3"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-14-875.jpg" alt="AI Bild 4"></div>
                    <div class="ai-slide-item"><img src="assets/images/preview.jpg" alt="AI Bild 5"></div>
                    <div class="ai-slide-item"><img src="assets/images/16-24-1600x1200.jpg" alt="AI Bild 6"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-01-340.jpg" alt="AI Bild 7"></div>
                    <div class="ai-slide-item"><img src="assets/images/28-25a-1.jpg" alt="AI Bild 8"></div>
                    <div class="ai-slide-item"><img src="assets/images/4-tta.jpg" alt="AI Bild 9"></div>
                    <div class="ai-slide-item"><img src="assets/images/vmcu-mit-corinne-816x612.jpg" alt="AI Bild 10"></div>
                    <div class="ai-slide-item"><img src="assets/images/30-25a.jpg" alt="AI Bild 11"></div>
                    <div class="ai-slide-item"><img src="assets/images/denia-11.png" alt="AI Bild 12"></div>
                    <div class="ai-slide-item"><img src="assets/images/vewoa.jpg" alt="AI Bild 13"></div>
                    <div class="ai-slide-item"><img src="assets/images/03-24a-2576x1446.jpg" alt="AI Bild 14"></div>
                    <div class="ai-slide-item"><img src="assets/images/titel-neu.png" alt="AI Bild 15"></div>
                    <div class="ai-slide-item"><img src="assets/images/skitag-19-808x606.jpg" alt="AI Bild 16"></div>
                    <div class="ai-slide-item"><img src="assets/images/25-25c.jpg" alt="AI Bild 17"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-25.jpg" alt="AI Bild 18"></div>  
                </div>

                <!-- Gruppe 3 -->
                <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="assets/images/buis-les-baronnies-5-1000x750.jpg" alt="AI Bild 1"></div>
                    <div class="ai-slide-item"><img src="assets/images/lavendelfeld.webp" alt="AI Bild 2"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-2026.jpg" alt="AI Bild 3"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-14-875.jpg" alt="AI Bild 4"></div>
                    <div class="ai-slide-item"><img src="assets/images/preview.jpg" alt="AI Bild 5"></div>
                    <div class="ai-slide-item"><img src="assets/images/16-24-1600x1200.jpg" alt="AI Bild 6"></div>
                    <div class="ai-slide-item"><img src="assets/images/foto-01-340.jpg" alt="AI Bild 7"></div>
                    <div class="ai-slide-item"><img src="assets/images/28-25a-1.jpg" alt="AI Bild 8"></div>
                    <div class="ai-slide-item"><img src="assets/images/4-tta.jpg" alt="AI Bild 9"></div>
                    <div class="ai-slide-item"><img src="assets/images/vmcu-mit-corinne-816x612.jpg" alt="AI Bild 10"></div>
                    <div class="ai-slide-item"><img src="assets/images/30-25a.jpg" alt="AI Bild 11"></div>
                    <div class="ai-slide-item"><img src="assets/images/denia-11.png" alt="AI Bild 12"></div>
                    <div class="ai-slide-item"><img src="assets/images/vewoa.jpg" alt="AI Bild 13"></div>
                    <div class="ai-slide-item"><img src="assets/images/03-24a-2576x1446.jpg" alt="AI Bild 14"></div>
                    <div class="ai-slide-item"><img src="assets/images/titel-neu.png" alt="AI Bild 15"></div>
                    <div class="ai-slide-item"><img src="assets/images/skitag-19-808x606.jpg" alt="AI Bild 16"></div>
                    <div class="ai-slide-item"><img src="assets/images/25-25c.jpg" alt="AI Bild 17"></div>
                    <div class="ai-slide-item"><img src="assets/images/05-25.jpg" alt="AI Bild 18"></div>  
                </div>

[struggle]

Irgendwie hatte ich schon gedacht, ich bin doof
Beitrag 5:

mit Deinem Slider stimmt irgendwas nicht, da laufen die sechs Bilder durch und dann"springt" er. Das war bei mir auch so. Ich konnte das unterbinden, indem die sechs Bilder 3 x hintereinander durchlaufen

Da es keine Reaktion gab, dachte ich, eben nicht

Aber die genaue logische Erklärung ist natürlich noch viel besser !

[hansjuerg]

Ach so - jetzt habe ich es auch verstanden und das Springen abgestellt

Vielen Dank und allseits einen schönen Tag.

[Tommy Herrmann]

… noch ein Hinweis.

Da Du jetzt doppelt so viele Bilder als ich verwendest, nämlich 12, läuft Deine Animation auch ungefähr doppelt so schnell bei gleicher CSS-Einstellung:

Code: Alles auswählen

animation: aiScrollLoop 42s linear infinite;

https://vmcu.ch/#slider-mit-png-vb

Es müssen also jetzt in den gleichen 42 Sekunden doppelt soviele Bilder angezeigt werden.

Das ist vielleicht ein wenig zu schnell für Deinen Geschmack. Definitiv zu schnell für mein Empfinden. Wenn die sichtbare Geschwindigkeit gleich bleiben soll, musst Du die Dauer ungefähr proportional in Sekunden erhöhen:

6 Bilder = 42s 12 Bilder = 84s 15 Bilder = 105s

Also dann bei Dir:

Code: Alles auswählen

animation: aiScrollLoop 84s linear infinite;

[hansjuerg]

Guten Tag miteinander

Danke Tommy, ich habe den Wert auf 63s korrigiert. Für mich passt diese Geschwindigkeit.