• 1. Einfache CSS3 Slideshow

    Sehr einfache Slideshow, die automatisch startet, verfügt nur über einen Start und Pause Button. Diese werden erst beim überfahren mit der Maus, innerhalb der Slideshow, eingeblendet. Demo»

  • 2. CSS3 Slideshow mit Steuerelemente

    Diese Slideshow verfügt über kleine Bullets die bei jedem Bildwechsel markiert werden. Mit diesen ist es möglich, während der Animation, auf die einzelnen Bilder zuzugreifen. In diesem Beispiel habe ich eine etwas eigenwillige Methode angewendet, um die Animation zu beenden. Es wird einfach eine nicht existierende Dummy Animation aufgerufen. Demo»

  • 3. CSS3 Slideshow mit Steuerelemente die Zweite

    Diese Slideshow ist im Wesentlichen mit dem 2. Vorschlag identisch. Nur, dass hier die Animation nicht angehalten wird, sondern mit den Pseudoklassen, :before :after die Bilder und die Texte über der Animation eingeblendet werden. Vermutlich ist das die bessere Lösung. Demo»

  • NEU4. CSS3 Slideshow mit vor/zurück Buttons und stopp/weiter Funktion

    Diese Slideshow wurde mit der Pseudoklasse :checked und Input-Elemente umgesetzt. Die vor/zurück Buttons werden ständig aktualisiert. Demo»

  • Drei weitere Animations-Beispiele

    Diese animierten Slideshows basieren alle auf das Beispiel 1 und haben verschiedene Übergangseffekte, die mit opacity und transform erstellt wurden. Sie sollen nur als Anregung für eure Experimente dienen. Achso, diese Beispiele sind alle mit einer Definitionsliste DL realisiert worden. Ich empfehle euch aber für diese Spielereien eine UL Liste. So habt ihr nur ein Container zum Animieren, was viel einfacher ist.

    Slideshow mit Überblendung (Fade)»

    Slideshow mit Transform Scale»

    Slideshow mit Transform Translate»

nach oben