Hej alle,

mein simpler CSS-Slider ist über das WE weiter fortgeschritten:

Slider in Codepen

Ist noch nicht reif für Kritik. Ich weiß selber noch zu viel, was ich erst verbessern möchte, bevor ich Euch ranlasse ;-)

Was der Slider kann: Er läuft automatisch, man kann ihn anhalten. Das funktioniert sowohl mit Tastatur, als auch mit der Maus (checkbox-Hack - die Elemente kann jeder bedienen, sie sind auch sinnvoll beschriftet).

Der Slider wird außerdem angehalten, wenn man die Liste, die die Slides enthält mit der Maus überfährt (Quasi-Standard bei den meisten Slidern, die ich kenne) oder wenn man die Liste antabbt (fokussieren dank tabindes="0" möglich).

Das war es aber auch schon.

Annahmen

Ich gehe davon aus, dass es sich bei den Bildern um Schmuckgrafiken handelt und habe diese entsprechend über CSS eingefügt und nicht ins HTML integriert.

Bekannte To-Dos (Ergänzungen erwünscht!)

• Aus den Buttons werde ich wohl wieder Links machen, denn sie sollen ja wohl "nur" auf eine andere Seite verweisen.
• Die Animation "slide" verschiebt die einzelnen li um jeweils 100%, 200% usw (Änderung des Wertes für top). Die Animation hat anscheinend Vorrang für "händisch" gesetzte Werte, d. h. wenn die Animation läuft, bringt ein :checked ~ li { top: 0; } nicht das erste slide zurück.

Ich habe mir damit geholfen, dass ich die laufende Animation dadurch abbreche, dass ich den Namen einer nicht existierenden Animation angebe:

:checked ~ li {
    top: 0;
    animation-name: no-valid-animation;
}

Gesteuert wird das über eine Radio-Buttonleiste. Je nachdem welcher Radio-Button aktiv ist, wird der Wert für top auf unterschiedliche Werte gesetzt: (-100%, -200% usw, um das entsprechende slide anzuspringen).

Da eine nicht existierende Animation gewählt ist, läuft auch nichts mehr an. Das ist wohl auch der Wunsch eines nutzers, der ein bestimmtes Slide anspringt, um es in ruhe lesen zu können.

Der letzte Radio-Button dient dazu, die Animation wieder zu starten.

Gibt es eine elegantere Methode, als eine nicht vorhandene Animation aufzurufen?

• Als (auskommentierte) Alternative habe ich einen "Pause"-Button eingebaut, der die Animation einfach anhält, wo sie gerade steht (z. B. um von ihr nciht vom Lesen abgelenkt zu werden - hier wären auch neue Darstellungsformen möglich, so könnte aus den einzelnen LIs ein Flex-Box-Grid werden, statt einer Animation. Mehr als das folgende CSS braucht es dafür nicht:

.slide { 
  display: flex; 
  flex-flow: row wrap; 
} 

.slide > * { 
  flex-basis: 20em; 
  flex-grow: 1; 
}

TO-DO

• Die Buttons werden noch gestaltet.
• RWD muss noch optimieret werden

Grenzen und Nachteile

• Die Radio-Buttons zur Steuerung hätte ich gerne in einem Container, am liebsten alles als Liste, dann könnte die komplett übersprungen werden, von z. B. Screenreader-Nutzern. Dann funktioniert aber der check-Box-Hack nicht mehr, der voraussetzt, dass der Slider und die "Bedienelemente" in demselben Elternelement liegen.
• Sollen mehr oder weniger Bilder angezeigt werden, muss das CSS angepasst werden. Zwar kann man mit CSS auch zählen, das würde hier aber zu sehr viel Code führen, weil 1 bis x Fälle abgefangen werden müssten. Vielleicht ist SASS hier die Rettung. Aber dann muss man zwar nciht mehr so viel schreiben, eine riesengroße CSS-Datei käme am Ende dennoch heraus, wenn man beispielsweise bis zu 100 Slides unterstützen wollte. Sonst kommt man um JS nciht mehr drum herum. Mehr als 10 Slides machen aber auch selten Sinn. Von daher kann man mit einer Begrenzung auf 10 wohl gut leben?!? Muss ich mir mal Gedanken drüber machen - input und feedback erwünscht!
• Sollen Bilder getauscht werden, müssen die unter dem vorhandenen Namen gespeichert werden - neue Namen lassen sich nicht vergeben, ohne dass auch hier das CSS wieder angepasst werden müsste

Was weiter?

Die Idee eines reinen und simplen CSS-Sliders hat trotz der Nachteile ihren Charme. Er ist schnell und dank der Tatsache dass (bis auf den Checkbox-Hack) nur semantisch sinnvolle Elemente zum Einsatz kommen, ist er selbsterklärend, performant und zugänglich.

Wenn die nötige Logik (wie viele Slides sind vorhanden und welches CSS soll entsprechend übermittelt werden für Dauer der Animation und Anzahl der animierten Schritte (Slide 1 bis X)) kann dieser Slider IMHO auch produktiv genutzt werden z. B. in einer TYPO3-Extension oder in einem PHP-Skript usw

Gerade für das Wiki würde ich im Anschluss an die Ausarbeitung weiterer Slider-Details einen Artikel schreiben, der die Erstellung eines solchen Sliders Schritt für Schritt erklärt. Man kann daran mehrere Dinge prima erklären: geschicktes Selektieren (Checkbox-Hack und zählen von ELementen), Spezifität, Aspekte des RWD.

Insgesamt ist dieser Slider (wie jeder aufgrund der Tatsache, dass es eben ein Slider ist) ein relativ komplexes Konstrukt, aber ich denke, dieser eigent sich gerade aufgrund des Verzichts zusätzlicher Techniken gut dafür, die Schritte auseinanderzubröseln, um zu erklären, was ein Slider überhaupt tut und wie man so etwas prinzipiell umsetzen kann.

Weitere Varianten (aufregendere CSS-Effekte, scrollen in andere Richtungen, bouncing usw) nicht ausgeschlossen... ;-)

Ein Hinweis: Da in das Projekt viel Zeit fließen dürfte, würde ich es gerne auch noch auf meiner Homepage und/oder einer eigenen Projekt-Seite vorstellen, es wäre also nicht exklusiv für selfHTML. Ich weiß auch nicht, ob es überhaupt komplex genug ist, um urheberrechtlich geschützt werden zu können - ich würde es aber eh unter eine Lizenz wie MIT oder so stellen, dass es jeder verwenden darf, der möchte, so dass SELF-Exklusivität prinzipbedingt nicht gegeben wäre.

Ich habe auch erste Anfragen aus dem TYPO3-Umfeld, den nutzen zu dürfen für eine frei verfügbare Extension.

Ich hoffe, das ist ok für Euch.

Marc