Der CSS(-only)-Slider – aufgemotzt

Das Script CSS-only-Slider habe ich mit JavaScript und etwas PHP noch komfortabler gemacht: Der Besucher kann jetzt die Geschwindigkeit der Slideshow einstellen, oder die Animation stoppen, und manuell durch die Bilder scrollen / wischen.

❯❯

# Weitere Bilder genau nach Muster hinzufügen. Natürlich sind auch .jpg Dateien erlaubt

Mit der Maus durch die Bilder scrollen

Dauer pro Bild (1 … 10 Sek.):

Feature-List

• CSS für @keyframes usw. automatisch erstellen, abhängig von der Anzahl Slides. (Bereits in CSS-only-Slider realisiert )
• Animation pausieren und manuelles Scrollen / Wischen ermöglichen
  Die Animation pausieren wäre mit CSS kein Problem. Weil ich aber manuelles Scrollen / Wischen ermöglichen will, ist JavaScript erforderlich. Das „only“ in „CSS-only” trifft also streng genommen nicht mehr zu.
• ScrollSnap
  Apples mobiles Betriebssystem iOS hat seit Version 16 einen üblen Bug, wenn einem Element die CSS-Anweisungen „animation: infinite …“ und „scroll-snap …“ gleichzeitig zugewiesen werden. Auch der Safari-Browser auf macOS ist davon betroffen. Der erforderliche JavaScript-workaround ist alles andere als elegant.
• Anzeigedauer der einzelnen Slides vom User einstellbar
  
  Weil die dafür zuständigen CSS-Anweisungen serverseitig mit PHP erstellt wurden (siehe CSS-only-Slider) muss auch eine Änderung der Anzeigedauer serverseitig erfolgen. Ein Reload der Seite ist daher leider nicht zu vermeiden. Um den Reload weniger störend zu gestalten, wird

  1. die aktuelle Scrollposition der Seite wiederhergestellt (JavaScript – not mobile).
  2. die Seite nach dem Neuladen sanft eingeblendet (CSS).

Wenn Sie Verwendung für dieses Script haben:
Einfach hier downloaden

Mit dem Download anerkennen Sie unsere Allgemeinen Geschäftsbedingungen.

Copyright-Hinweis

Artikeltexte und Code-Snippets: Creative Commons  CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.