Mit Slider Film steuern

[Rolf B]

Hallo Uwe,

naja, ein Slider ist mit <input type="range"> schnell erstellt.

Ein input-Event ist schnell registriert.

Die naive Lösung wäre dann, im input-Eventhandler das src Attribut eines img Elements zu verändern.

Nur wird das kein schöner Film, weil der Brauser jedes Bild erst bei Bedarf lädt. Man muss die Bilder also im Voraus laden. In 100 img Elemente, die ausgeblendet sind (mit display:none) und von denen das, das gerade aktiv ist, eingeblendet wird. Diese img liegen alle an der gleichen Position (position:absolute) übereinander.

Diese img Elemente erzeugst Du sinnvollerweise per JavaScript in einer Schleife, und registriert auf jedem einen Eventhandler für das load Event. Das ist immer die gleiche Funktion, und sie muss nur zählen, wieviele Bilder geladen sind. Sobald der Zähler auf 100 steht, kannst Du den slider aktivieren.

Das ist alles kein Hexenwerk. Fang mal an, zum Beispiel in einem codepen oder einem jsfiddle, und dann können wir uns das gemeinsam anschauen und uns über Fragen, die Du noch hast, unterhalten.

Das setzt natürlich voraus, dass Du Grundkenntnisse in CSS und JavaScript hast. Hast Du die nicht, würde ich empfehlen, dass Du Dir erstmal die Tutorials in unserem Wiki vornimmst.

Rolf