Mobirise Tutorials

Slider Hinweise

Anzahl Bilder

Damit der Loop nicht "springt", müssen alle Gruppen exakt denselben Bildsatz in derselben Reihenfolge enthalten. Daher habe ich hier 6 unterschiedliche Bilder verwendet, die sich in allen 3 Gruppen wiederholen.

Bei zum Beispiel 15 unterschiedlichen Bildern brauchst Du also:

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

Wichtig:

Der CSS-Wert bleibt bei drei identischen Gruppen:

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: Man verwendet dann zweimal drei Gruppen mit identischen Bildern:

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

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

Also: Wenn du 15 Bilder hast, trage in jeder der drei Gruppen einfach dieselben 15 Bilder ein. Im Code‑Editor geht das am einfachsten per Kopieren und Einfügen.

Geschwindigkeit der Animation:

Ich verwende hier 6 Bilder pro Gruppe mit dieser CSS-Anweisung:

animation: aiScrollLoop 42s linear infinite;

Wenn die sichtbare Geschwindigkeit bei mehr Bildern pro Gruppe gleich bleiben soll, musst man die Dauer ungefähr proportional erhöhen:

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

Also dann bei z.B. 12 Bilder ungefähr:

animation: aiScrollLoop 84s linear infinite;