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:
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.
