Content Slider ohne JavaScript nur CSS3 ideal für einen WordPress Blog -The Pure CSS3 Slider ist ein experimentelles Projekt, mit dem sich jeder sehr schnell einen schicken Content-Slider zusammenstellen kann – ganz ohne JavaScript. Die Inhalte, die abwechselnd per Animation erscheinen, lassen sich frei definieren. Bilder, Texte und auch Iframes sind möglich. Für jeden Inhalt kann zudem eine Überschrift nebst Beschreibung vergeben werden.
Herunterladen und loslegen. Es gibt eine kommentierte und eine unkommentierte Version der jeweiligen HTML- und CSS-Dateien. Die Inhalte des Sliders werden als Liste angelegt. Für jedes Listenelement lässt sich der Inhalt, die Überschrift und eine Beschreibung definieren. Alles wird von zwei Containerelementen umschlossen:
Der HTML-Aufbau des Sliders ist sehr simpel. Die Anzahl der Inhalte kann beliebig erweitert werden. Wer keine Überschriften und Beschreibungen braucht, lässt das SPAN-Element einfach weg.
Content Slider mit Überschrift und Pause-Grafik (beim Darüberfahren mit der Maus)
<div id="slider"> <div id="mask"> <ul> <li> <img src="bild.png" /> <span> <h2>Überschift</h2> <p>Besc hreibung</p> </span> </li> … </ul> </div> <div id="progress"></div> <div id="overlay"></div> <div id="pause"></div> <div>
Hier habe ich dran gebastelt Beispiel
Viel Spaß damit