Seit einiger Zeit versuche ich immer wieder, eine reine CSS-Diashow zu implementieren, die Folgendes ermöglicht:

Vorwärts- und Rückwärtsnavigation anbieten.Navigationsverlauf nicht ändern.Geben Sie der Bewegung des Inhalts eine eindeutige Richtung.Arbeiten Sie mit so vielen Browsern wie möglich.

Die meisten anderen CSS-Diashows, auf die ich gestoßen bin, haben diese Kriterien nicht erfüllt.

Zum Glück hat es so lange gedauert, bis die Browser selbst No-End verbessert haben, bis zu dem Punkt, an dem es jetzt tatsächlich ziemlich allgemein möglich ist, wenn auch mit ein paar "modernen" CSS-Ismen. Nur für den Fall, dass es für irgendjemanden da draußen nützlich ist, dachte ich, ich würde es hier posten.

Wie können Sie eine navigierbare Diashow nur mit CSS und dem folgenden Markup erstellen?

<ul class="css-slider">
  <li class="slide"><img src="photos/a.jpg" /></li>
  <li class="slide"><img src="photos/b.jpg" /></li>
  <li class="slide"><img src="photos/c.jpg" /></li>
  <li class="slide"><img src="photos/d.jpg" /></li>
  <li class="slide"><img src="photos/e.jpg" /></li>
</ul>