Ebene 11 Webentwicklung . AutoCAD . Schulung

Slider als Keyframe-Animation mit CSS3 So kommt ohne Javascript Bewegung in die Sache

Mit den @keyframes-Regeln von CSS3 stehen Werkzeuge zur Verfügung, die Darstellung von Inhalten einer Website zeitgesteuert zu verändern. Um die Möglichkeiten sowie die Vor- und Nachteile im Vergleich zum Einsatz von Javascript etwas näher zu untersuchen, wird hier der Ansatz aus Imageslider ohne Javascript weiterverfolgt und der Slider um einen zeitgesteuerten Ablauf ergänzt.

Konzeptskizze für einen CSS-Slider

Grundlagen - was sind Keyframe-Animationen

Keyframe-Animationen bieten die Möglichkeit, die Darstellung von HTML-Elementen über eine Zeitspanne hinweg zu verändern. Es lassen sich beliebig viele Zwischenstufen der Darstellung (Keyframes) definieren, der Browser berechnet die Übergänge dazwischen - es entsteht Bewegung.

Wir brauchen also zweierlei Dinge:

  1. Die Definition der Darstellung eines Elements zu verschiedenen Zeitpunkten
  2. Die Zuweisung der Definition (inkl. Angaben zum Ablauf) zu einem Element

Keyframe-Animationen definieren

Im einfachsten Fall wird ein Start- und ein Endzustand definiert, es können aber auch beliebig viele Zwischenstufen (Keyframes) eingefügt werden. Für jeden Keyframe kann man beliebigen CSS-Eigenschaften (diese sollten natürlich animierbar sein) Werte zuweisen. Allgemein ausgedrückt sieht eine Animation wie folgt aus:

@keyframes nameDerAnimation {
	x% {
		Eigenschaft01: Wert;
		Eigenschaft02: Wert;
	}

	y% {
		Eigenschaft01: Wert;
		Eigenschaft02: Wert;
	}

	z% {
		Eigenschaft01: Wert;
		Eigenschaft02: Wert;
	}
}

Derzeit werden Vendor-Präfixe für webkit-basierte Browser noch benötigt, sind hier zur besseren Lesbarkeit jedoch nicht aufgeführt.

Zuweisung einer Animation

Eine Animation lässt sich über folgende CSS-Eigenschaften steuern

Essentiell sind der Name und die Dauer der Animation. In Kurzschreibweise lassen sich diese Eigenschaften unter animation zusammenfassen. Die Zuweisung einer Animation zu einem Element E sieht also mindestens wie folgt aus:

E {
	animation: name duration;
}

Einen Überblick über die verschiedenen Eigenschaften und mögliche Werte findet sich unter http://www.w3.org/TR/css3-animations/. Auch hier werden die Vendor-Präfixe für die Unterstützung der Webkit-Browser noch benötigt.

Slider - Grundfunktion

Nehmen wir uns den angestrebten Slider vor. Dieser besteht in Sachen HTML, wie in Imageslider ohne Javascript beschrieben, aus einer unsortierten Liste für die Slides und Radiobuttons sowie zugehörige Labels zur Steuerung. Der prinzipielle Aufbau des Codes, angereichert mit ein paar zusätzlichen Klassen, die im weiteren Verlauf das Leben leichter machen:

Die einzelnen Slides sind gefloatet, die Position der Liste soll sich je Schritt (Keyframe) um die Breite eines Listenpunktes im Sichtfenster weiterschieben. In der Annahme, dass der Slider aus vier Slides besteht, hat jeder Slide genau 25% der gesamten Zeit der Animation zur Verfügung. Diese Zeit teilt sich dann nochmal in die Standzeit (hier 15%) und die Animationszeit (hier 10%) eines Slides. Die Notation der Animation sieht demnach wie folgt aus:

@keyframes slider {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

.slideList {
	animation-name: slider;
	animation-duration: 20s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
}

Die Angaben kann man natürlich in Kurzschreibweise notieren (s.u.), sind hier jedoch zur besseren Lesbarkeit ausgeschrieben. Notwendige Eigenschaften sind in diesem Fall der Name der Animation, die Dauer und die Wiederholung. Die Verzögerung wird nötig, da bei manueller Steuerung der Slider langsam verschoben wird, die Animation also erst starten darf, wenn die Verschiebung abgeschlossen ist.

Bauen wir die Animation in dieser Form, wird, wie nicht anders zu erwarten, im letzten Schritt der Slider komplett ins Nirwana (-400%) geschoben, es bleibt also nur noch Luft im Sichtfenster übrig. Wir brauchen demzufolge noch eine Möglichkeit, statt dieser Luft den ersten Slide noch einmal zu sehen, bevor die Animation wieder von vorne startet.

Die Luft ist raus

Die Idee ist eigentlich ganz simpel. Wir definieren für den ersten Slide eine weitere Keyframe-Animation, die diesen unmittelbar bevor der letzte Verschub des Sliders stattfindet (bei 90%), nahtlos an seinem Ende anfügt. Danach starten beide Animationen wieder von vorne und es entsteht der Eindruck eines Endlosbandes. Die Stylesheet-Anweisungen dazu:

@keyframes slide01ToEndStart01 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}

.slide {
	position: relative;
}

.slide01 {
	animation: slides01ToEndStart01 20s 2s infinite;
}

Damit haben wir einen voll funktionstüchtigen Slider, allerdings noch ohne Steuerelemente. Diese kommen im nächsten Schritt.

Steuerungsmöglichkeit für den Benutzer

Die Steuerelemente funktionieren vom Prinzip identisch zu dem in Imageslider ohne Javascript beschriebenen Szenario über die Pseudoklasse :checked (Checkbox-Hack). Diese Variante läuft auch hier prima, allerdings stolpern wir über das Problem, dass die einmal zugewiesene Animation ohne Unterlass weiterläuft. D.h. bei Klick auf einen Radiobutton rutscht der Slider zwar kurz zur passenden Position, aber dann greift direkt wieder die bei Seitenaufruf gestartete Animation und es wird zum nächsten Keyframe in ihrem Ablauf gesprungen. Zu verhindern wäre dies, wenn nach jeder Wahl eines Radiobuttons (also dem Sprung zu einem bestimmten Slide) die Animation bei eben diesem Slide wieder von vorne losläuft. Da es keine Möglichkeit gibt, einen anderen Startpunkt als 0 für eine Animation zu definieren, bleibt nur übrig, jeweils eine separate Keyframe-Animation zu erstellen und diese in Abhängigkeit des Status der Radiobuttons zuzuweisen. Das könnte dann wie folgt aussehen:

@keyframes slidesStart01 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

@keyframes slidesStart02 {
	90.01% {left: 0;}
	0%, 15%, 100% {left: -100%;}
	25%, 40% {left: -200%;}
	50%, 65% {left: -300%;}
	75%, 90% {left: -400%;}
}

@keyframes slidesStart03 {
	65.01% {left: 0;}
	0%, 15%, 100% {left: -200%;}
	25%, 40% {left: -300%;}
	50%, 65% {left: -400%;}
	75%, 90% {left: -100%;}
}

@keyframes slidesStart04 {
	40.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

.slideList{
	animation: 20s 2s infinite;
	transition: left 2s;
}

#slide01:checked ~ .slideList {
	animation-name: slidesStart01;
	left: 0;
}

#slide02:checked ~ .slideList {
	animation-name: slidesStart02;
	left: -100%;
}

#slide03:checked ~ .slideList {
	animation-name: slidesStart03;
	left: -200%;
}

#slide04:checked ~ .slideList {
	animation-name: slidesStart04;
	left: -300%;
}

Soweit, so gut - aber drei Problemstellen gibt es noch. Erstens muss der erste Slide passend zur jeweils aktiven Animation des Sliders verschoben werden, zweitens lässt sich nicht noch einmal zum aktuell ausgewählten Slide springen und drittens sollten sich die Kontrollelemente natürlich auch dem Status der Animation anpassen.

Position des ersten Slides

Da die Animation jeweils bei einem anderen Slide startet, müssen wir für den ersten Slide weitere Keyframe-Animationen anlegen, damit er zum jeweils passenden Zeitpunkt verschoben wird.

@keyframes slide01ToEndStart01 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}

@keyframes slide01ToEndStart02 {
	49.99%, 90.01% {left: 0;}
	50%, 90% {left: 100%;}
}

@keyframes slide01ToEndStart03 {
	24.99%, 65.01% {left: 0;}
	25%, 65% {left: 100%;}
}

@keyframes slide01ToEndStart04 {
	40.01% {left: 0;}
	0%, 40% {left: 100%;}
}

#slide01:checked ~ .slideList .slide01 {
	animation-name: slide01ToEndStart01;
}

#slide02:checked ~ .slideList .slide01 {
	animation-name: slide01ToEndStart02;
}

#slide03:checked ~ .slideList .slide01 {
	animation-name: slide01ToEndStart03;
}

#slide04:checked ~ .slideList .slide01 {
	animation-name: slide01ToEndStart04;
}

Doch damit nicht genug. Es kann passieren, das wir in dem Moment manuell zu einem anderen Slide springen, in dem der erste Slide schon durch die Animation verschoben wurde. Die Position muss also bei Klick auf einen Steuerelement wieder auf Null gesetzt werden. Da der gesamte Slider jedoch langsam verschoben wird (Transition), darf der erste Slide nicht sofort zurückgesetzt werden, sondern mit einer entsprechenden Verzögerung. Diese wird per transition-delay gesteuert:

.slide {
	transition: left 0s .5s;
}

#slide04:checked ~ .slideList .slide {
	transition-delay: 2s;
}

Volle Kontrolle

Der aktuell markierte Slide kann bis jetzt nicht wieder angewählt werden. Ist auch logisch, da die Animation nicht den Zustand der Radiobuttons steuert, der einmal gewählte also so lange ausgewählt bleibt, bis man einen anderen anklickt. Ein erneuter Klick auf einen ausgewählten Radiobutton löst keine neue Animation aus. Wenn man mit dieser Einschränkung nicht leben möchte, kann man mit einer doppelten Steuerung arbeiten. Die Idee ist, die Anzahl der Radiobuttons zu verdoppeln und die beiden Hälften mit zwei getrennten Zusammenstellungen von Labels zu steuern. Durch die Trennung, lassen sich die beiden Labelgruppen jeweils wechselseitig sichtbar schalten - ist ein zur ersten Steuerung zugehöriger Radiobutton ausgewählt, wird die zweite Gruppe von Labeln angezeigt und umgekehrt. Wir brauchen also etwas zusätzlichen HTML-Code:

Dieses zusätzliche Markup zieht einen Rattenschwanz an weiteren Stylesheets nach sich. Da bei jedem Klick auf ein Label, die zugehörige Animation von vorne starten muss, können wir den Buttons der zweiten Gruppe nicht die gleichen Animationen zuordnen. Folgendes reicht leider nicht:

#slide01:checked ~ .slideList,
#slide101:checked ~ .slideList {
	animation-name: slidesStart01;
	left: 0;
}

Es müssen die gleichen Animationen unter einem neuen Namen angelegt und separat aufgerufen werden - z.B. so:

@keyframes slidesStart01 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

#slide01:checked ~ .slideList {
	animation-name: slidesStart01;
	left: 0;
}

@keyframes slidesStart101 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

#slide101:checked ~ .slideList {
	animation-name: slidesStart101;
	left: 0;
}

Analog hierzu wird der gleiche Schritt auch für die Animationen, die den ersten Slide ans Ende schieben, notwendig.

Hervorhebung der Labels

Zur Kennzeichnung des zum jeweils ausgewählten Radiobuttons zugehörigen Labels werden ebenfalls Keyframe-Animationen definiert. Hier muss wie bereits gewohnt für jeden Startpunkt wieder eine separate Definition erstellt werden, was dann für die erste Labelgruppe wie folgt aussehen kann:

@keyframes slideControl01 {
	24.99% {background: #68b022;}
	25%, 100% {background: none;}
}

@keyframes slideControl02 {
	24.99%, 50% {background: none;}
	25%, 49.99% {background: #68b022;}
}

@keyframes slideControl03 {
	49.99%, 75% {background: none;}
	50%, 74.99% {background: #68b022;}
}

@keyframes slideControl04 {
	74.99% {background: none;}
	75%, 100% {background: #68b022;}
}

.slideControl label {
	animation: 20s 2s infinite;
}

#slide01:checked ~ .slideControl label[for="slide01"],
#slide02:checked ~ .slideControl label[for="slide02"],
#slide03:checked ~ .slideControl label[for="slide03"],
#slide04:checked ~ .slideControl label[for="slide04"] {
	animation-name: slideControl01;
	background: #68b022;
}

#slide01:checked ~ .slideControl label[for="slide02"],
#slide02:checked ~ .slideControl label[for="slide03"],
#slide03:checked ~ .slideControl label[for="slide04"],
#slide04:checked ~ .slideControl label[for="slide01"] {
	animation-name: slideControl02;
}

#slide01:checked ~ .slideControl label[for="slide03"],
#slide02:checked ~ .slideControl label[for="slide04"],
#slide03:checked ~ .slideControl label[for="slide01"],
#slide04:checked ~ .slideControl label[for="slide02"]  {
	animation-name: slideControl03;
}

#slide01:checked ~ .slideControl label[for="slide04"],
#slide02:checked ~ .slideControl label[for="slide01"],
#slide03:checked ~ .slideControl label[for="slide02"],
#slide04:checked ~ .slideControl label[for="slide03"] {
	animation-name: slideControl04;
}

Die zweite Gruppe wird analog gesteuert und die Sichtbarkeit der Gruppen über die Positionierung mit folgendem Code geregelt:

.control01:checked ~ .slideControl01,
.control02:checked ~ .slideControl02 {
	left: -5000px;
}

Damit ist man durch und hat einen komplett funktionstüchtigen Slider inkl. Steuerelemente für beliebige Inhalte, der ohne eine Zeile Javascript auskommt.

Fazit

Man kann mittlerweile eine rein CSS-basierte Lösung für Slider und ähnliche Bausteine schreiben, die sogar von den meisten Browsern verstanden wird, d.h. mit Vendor-Präfix kommt so ziemlich jeder moderne Browser damit klar. Eine ausführliche Übersicht, welche Browser Keyframe-Animationen unterstützen gibt es auf caniuse.com.

Unbestritten ist sicherlich der Mehraufwand, im Vergleich zur Verwendung einer fertigen (Javascript-)Lösung. Wobei man die dem CSS-Code zugrundeliegende Logik natürlich auch mit einer beliebigen Programmiersprache abbilden und ihn so automatisch erzeugen lassen kann.

Andere Verhalten, als der Verschub von rechts nach links (Überblendungen, Drehungen, Skalierungen etc.) lassen sich über die Manipulation der entsprechenden CSS-Eigenschaften natürlich problemlos bauen.

So sieht es aus

  • Kegelschnitte

  • Maßaufgaben

    Maßaufgaben

  • Würfelkomposition

    Würfelkomposition

  • Schnitt Zylinder - Hyperboloid

    Schnittkurve von Zylinder und Hyperboloid

/* Definition der Animationen */
/* 1. Bewegung des Sliders */
@keyframes slidesStart01 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

@-webkit-keyframes slidesStart01 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

@keyframes slidesStart101 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

@-webkit-keyframes slidesStart101 {
	0%, 15% {left: 0;}
	25%, 40% {left: -100%;}
	50%, 65% {left: -200%;}
	75%, 90% {left: -300%;}
	100% {left: -400%;}
}

@keyframes slidesStart02 {
	90.01% {left: 0;}
	0%, 15%, 100% {left: -100%;}
	25%, 40% {left: -200%;}
	50%, 65% {left: -300%;}
	75%, 90% {left: -400%;}
}

@-webkit-keyframes slidesStart02 {
	90.01% {left: 0;}
	0%, 15%, 100% {left: -100%;}
	25%, 40% {left: -200%;}
	50%, 65% {left: -300%;}
	75%, 90% {left: -400%;}
}

@keyframes slidesStart102 {
	90.01% {left: 0;}
	0%, 15%, 100% {left: -100%;}
	25%, 40% {left: -200%;}
	50%, 65% {left: -300%;}
	75%, 90% {left: -400%;}
}

@-webkit-keyframes slidesStart102 {
	90.01% {left: 0;}
	0%, 15%, 100% {left: -100%;}
	25%, 40% {left: -200%;}
	50%, 65% {left: -300%;}
	75%, 90% {left: -400%;}
}

@keyframes slidesStart03 {
	65.01% {left: 0;}
	0%, 15%, 100% {left: -200%;}
	25%, 40% {left: -300%;}
	50%, 65% {left: -400%;}
	75%, 90% {left: -100%;}
}

@-webkit-keyframes slidesStart03 {
	65.01% {left: 0;}
	0%, 15%, 100% {left: -200%;}
	25%, 40% {left: -300%;}
	50%, 65% {left: -400%;}
	75%, 90% {left: -100%;}
}

@keyframes slidesStart103 {
	65.01% {left: 0;}
	0%, 15%, 100% {left: -200%;}
	25%, 40% {left: -300%;}
	50%, 65% {left: -400%;}
	75%, 90% {left: -100%;}
}

@-webkit-keyframes slidesStart103 {
	65.01% {left: 0;}
	0%, 15%, 100% {left: -200%;}
	25%, 40% {left: -300%;}
	50%, 65% {left: -400%;}
	75%, 90% {left: -100%;}
}

@keyframes slidesStart04 {
	40.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

@-webkit-keyframes slidesStart04 {
	40.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

@keyframes slidesStart104 {
	40.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

@-webkit-keyframes slidesStart104 {
	40.01% {left: 0;}
	0%, 15%, 100% {left: -300%;}
	25%, 40% {left: -400%;}
	50%, 65% {left: -100%;}
	75%, 90% {left: -200%;}
}

/* 2. Wechsel des ersten Slides ans Ende und zurück */
@keyframes slide01ToEndStart01 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart01 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}

@keyframes slide01ToEndStart101 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart101 {
	89.99% {left: 0;}
	90%, 100% {left: 100%;}
}

@keyframes slide01ToEndStart02 {
	49.99%, 90.01% {left: 0;}
	50%, 90% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart02 {
	49.99%, 90.01% {left: 0;}
	50%, 90% {left: 100%;}
}

@keyframes slide01ToEndStart102 {
	49.99%, 90.01% {left: 0;}
	50%, 90% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart102 {
	49.99%, 90.01% {left: 0;}
	50%, 90% {left: 100%;}
}

@keyframes slide01ToEndStart03 {
	24.99%, 65.01% {left: 0;}
	25%, 65% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart03 {
	24.99%, 65.01% {left: 0;}
	25%, 65% {left: 100%;}
}

@keyframes slide01ToEndStart103 {
	24.99%, 65.01% {left: 0;}
	25%, 65% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart103 {
	24.99%, 65.01% {left: 0;}
	25%, 65% {left: 100%;}
}

@keyframes slide01ToEndStart04 {
	40.01% {left: 0;}
	0%, 40% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart04 {
	40.01% {left: 0;}
	0%, 40% {left: 100%;}
}

@keyframes slide01ToEndStart104 {
	40.01% {left: 0;}
	0%, 40% {left: 100%;}
}

@-webkit-keyframes slide01ToEndStart104 {
	40.01% {left: 0;}
	0%, 40% {left: 100%;}
}

/* 3. Animationen für den Farbwechsel in den Controls */
@keyframes slideControl01 {
	24.99% {background: #68b022;}
	25%, 100% {background: none;}
}

@-webkit-keyframes slideControl01 {
	24.99% {background: #68b022;}
	25%, 100% {background: none;}
}

@keyframes slideControl101 {
	24.99% {background: #68b022;}
	25%, 100% {background: none;}
}

@-webkit-keyframes slideControl101 {
	24.99% {background: #68b022;}
	25%, 100% {background: none;}
}

@keyframes slideControl02 {
	24.99%, 50% {background: none;}
	25%, 49.99% {background: #68b022;}
}

@-webkit-keyframes slideControl02 {
	24.99%, 50% {background: none;}
	25%, 49.99% {background: #68b022;}
}

@keyframes slideControl102 {
	24.99%, 50% {background: none;}
	25%, 49.99% {background: #68b022;}
}

@-webkit-keyframes slideControl102 {
	24.99%, 50% {background: none;}
	25%, 49.99% {background: #68b022;}
}

@keyframes slideControl03 {
	49.99%, 75% {background: none;}
	50%, 74.99% {background: #68b022;}
}

@-webkit-keyframes slideControl03 {
	49.99%, 75% {background: none;}
	50%, 74.99% {background: #68b022;}
}

@keyframes slideControl103 {
	49.99%, 75% {background: none;}
	50%, 74.99% {background: #68b022;}
}

@-webkit-keyframes slideControl103 {
	49.99%, 75% {background: none;}
	50%, 74.99% {background: #68b022;}
}

@keyframes slideControl04 {
	74.99% {background: none;}
	75%, 100% {background: #68b022;}
}

@-webkit-keyframes slideControl04 {
	74.99% {background: none;}
	75%, 100% {background: #68b022;}
}

@keyframes slideControl104 {
	74.99% {background: none;}
	75%, 100% {background: #68b022;}
}

@-webkit-keyframes slideControl104 {
	74.99% {background: none;}
	75%, 100% {background: #68b022;}
}

/* Basisfunktionalität des Sliders */
.slider {
	overflow: hidden;
}

.slider input {
	position: absolute;
	left: -10000px;
	top: 0;
}

.slideList {
	width: 400%; /* Anzahl der Slides mal 100 */
	position: relative; /* über die relative Positionierung wird der Slider durchs Sichtfenster geschoben */
	-webkit-transition: left 2s;
	-moz-transition: left 2s;
	-o-transition: left 2s;
	transition: left 2s; /* für den fließenden Schub */
	margin: 0;
	padding: 0;
}

.slideList:after {
	content: ".";
	display: block;
	height: .1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
}

.slide {
	list-style: none;
	width: 25%; /* Breite gleich 100 / Anzahl Slides */
	float: left;
	position: relative;
	left: 0;
	-webkit-transition: left 0s .5s;
	-moz-transition: left 0s .5s;
	-o-transition: left 0s .5s;
	transition: left 0s .5s; /*bei Klick auf ein Control werden alle Slides wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slides-Verschiebung beginnt, kommt ein delay hinzu*/
}

#slide04:checked ~ .slideList .slide,
#slide104:checked ~ .slideList .slide {
	-webkit-transition-delay: 2s;
	-moz-transition-delay: 2s;
	-o-transition-delay: 2s;
	transition-delay: 2s; /* damit er nicht zu früh zurückrutscht */
}
.slideList img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* Zuweisung der Keyframe-Animationen */
.slideList,
.slide,
.slideControl label {
	-webkit-animation: 20s 2s infinite;
	animation: 20s 2s infinite; /* allgemeingültige Werte für die Keyframe-Animation */
}

/* Positionierung und Aufruf der passenden Animation in Abhängigkeit des Status der Radiobuttons */
#slide01:checked ~ .slideList {
	-webkit-animation-name: slidesStart01;
	animation-name: slidesStart01;
	left: 0;
}

#slide02:checked ~ .slideList {
	-webkit-animation-name: slidesStart02;
	animation-name: slidesStart02;
	left: -100%;
}

#slide03:checked ~ .slideList {
	-webkit-animation-name: slidesStart03;
	animation-name: slidesStart03;
	left: -200%;
}

#slide04:checked ~ .slideList {
	-webkit-animation-name: slidesStart04;
	animation-name: slidesStart04;
	left: -300%;
}

/* Damit der Wechsel von 01 zu 101, 02 zu 102 usw. klappt, muss jeweils eine andere Animation aufgerufen werden*/
#slide101:checked ~ .slideList {
	-webkit-animation-name: slidesStart101;
	animation-name: slidesStart101;
	left: 0;
}

#slide102:checked ~ .slideList {
	-webkit-animation-name: slidesStart102;
	animation-name: slidesStart102;
	left: -100%;
}

#slide103:checked ~ .slideList {
	-webkit-animation-name: slidesStart103;
	animation-name: slidesStart103;
	left: -200%;
}

#slide104:checked ~ .slideList {
	-webkit-animation-name: slidesStart104;
	animation-name: slidesStart104;
	left: -300%;
}

/* Der erste Slide wird jeweils zur rechten Zeit an den Anfang oder das Ende gestellt */
#slide01:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart01;
	animation-name: slide01ToEndStart01;
}

#slide02:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart02;
	animation-name: slide01ToEndStart02;
}

#slide03:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart03;
	animation-name: slide01ToEndStart03;
}

#slide04:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart04;
	animation-name: slide01ToEndStart04;
}

/* Separate Animations-Namen für die zweite Steuerung */
#slide101:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart101;
	animation-name: slide01ToEndStart101;
}

#slide102:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart102;
	animation-name: slide01ToEndStart102;
}

#slide103:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart103;
	animation-name: slide01ToEndStart103;
}

#slide104:checked ~ .slideList .slide01 {
	-webkit-animation-name: slide01ToEndStart104;
	animation-name: slide01ToEndStart104;
}

/* nur zur Deko */
.sliderWrapper {
	position: relative;
	padding: 6px;
	border: 1px solid #ddd;
	margin-bottom: 40px;
}

.slide p {
	position: absolute;
	bottom: 1em;
	left: 0;
	background: rgba(0, 0, 0, .6);
	color: #ddd;
	padding: .4em 1em;
}

/* Steuerung durch den Benutzer */
.slideControl {
	width: 80px;
	position: absolute;
	bottom: -40px;
	left: 50%;
	margin-left: -40px;
}

.control01:checked ~ .slideControl01,
.control02:checked ~ .slideControl02 {
	left: -5000px; /* Blendet die nicht benötigten Labels aus */
}

.slideControl li {
	float: left;
	margin: 0 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: relative;
	text-indent: -10000px;
	border: 1px solid #ccc;
	box-shadow: 0 0 2px 2px #ccc;
	list-style: none;
}

.slideControl label {
	display: block;
	cursor: pointer;
	background: none;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	border: 2px solid #fff;
}

.slideControl label:hover {
	background: #68b022!important;
}

#slide01:checked ~ .slideControl label[for="slide101"],
#slide02:checked ~ .slideControl label[for="slide102"],
#slide03:checked ~ .slideControl label[for="slide103"],
#slide04:checked ~ .slideControl label[for="slide104"] {
	-webkit-animation-name: slideControl01;
	animation-name: slideControl01;
	background: #68b022;
}

#slide101:checked ~ .slideControl label[for="slide01"],
#slide102:checked ~ .slideControl label[for="slide02"],
#slide103:checked ~ .slideControl label[for="slide03"],
#slide104:checked ~ .slideControl label[for="slide04"]  {
	-webkit-animation-name: slideControl101;
	animation-name: slideControl101;
	background: #68b022;
}

#slide01:checked ~ .slideControl label[for="slide102"],
#slide02:checked ~ .slideControl label[for="slide103"],
#slide03:checked ~ .slideControl label[for="slide104"],
#slide04:checked ~ .slideControl label[for="slide101"] {
	-webkit-animation-name: slideControl02;
	animation-name: slideControl02;
}

#slide101:checked ~ .slideControl label[for="slide02"],
#slide102:checked ~ .slideControl label[for="slide03"],
#slide103:checked ~ .slideControl label[for="slide04"],
#slide104:checked ~ .slideControl label[for="slide01"]  {
	-webkit-animation-name: slideControl102;
	animation-name: slideControl102;
}

#slide01:checked ~ .slideControl label[for="slide103"],
#slide02:checked ~ .slideControl label[for="slide104"],
#slide03:checked ~ .slideControl label[for="slide101"],
#slide04:checked ~ .slideControl label[for="slide102"]  {
	-webkit-animation-name: slideControl03;
	animation-name: slideControl03;
}

#slide101:checked ~ .slideControl label[for="slide03"],
#slide102:checked ~ .slideControl label[for="slide04"],
#slide103:checked ~ .slideControl label[for="slide01"],
#slide104:checked ~ .slideControl label[for="slide02"]  {
	-webkit-animation-name: slideControl103;
	animation-name: slideControl103;
}

#slide01:checked ~ .slideControl label[for="slide104"],
#slide02:checked ~ .slideControl label[for="slide101"],
#slide03:checked ~ .slideControl label[for="slide102"],
#slide04:checked ~ .slideControl label[for="slide103"] {
	-webkit-animation-name: slideControl04;
	animation-name: slideControl04;
}

#slide101:checked ~ .slideControl label[for="slide04"],
#slide102:checked ~ .slideControl label[for="slide01"],
#slide103:checked ~ .slideControl label[for="slide02"],
#slide104:checked ~ .slideControl label[for="slide03"]  {
	-webkit-animation-name: slideControl104;
	animation-name: slideControl104;
}
  • Kegelschnitte

  • Maßaufgaben

    Maßaufgaben

  • Würfelkomposition

    Würfelkomposition

  • Schnitt Zylinder - Hyperboloid

    Schnittkurve von Zylinder und Hyperboloid

Kommentare (40)

    • Geschrieben von: robbin
    • am: 12.01.2016 um 23:40 Uhr

    Hallo,
    ich habe nun mal das ganze bei mir eingebaut … jedoch habe ich ein Problem unter den Bildern mit schwarzen Punkten und in den Bildern am Anfang … siehe http://u1205v418.server23.ikayano.de/gaming-core/
    LG

    • Geschrieben von: Jan
    • am: 13.01.2016 um 08:26 Uhr

    Dank dir für den Hinweis. Die schwarzen Punkte sind die default-Bullets der Listenpunkte und werden in diesem Beispiel durch Anweisungen an anderer Stelle ausgeblendet. Gehört der Vollständigkeit halber aber auch explizit in den Beispielcode - ich habe es ergänzt (list-style: none; in Zeile 325 und 490).

    • Geschrieben von: lulu
    • am: 02.02.2016 um 20:03 Uhr

    Hallo,
    wie groß muss jedes Bild sein? Bei mir ist immer an der rechte Seite etwas von dem Slider davor.

    • Geschrieben von: Jan
    • am: 06.02.2016 um 12:04 Uhr

    Die Bildgröße ist egal, da die Bilder auf 100 Prozent Breite skaliert werden. Nur im gleichen Seitenverhältnis sollten alle Bilder eines Sliders sein.

    • Geschrieben von: Dan
    • am: 24.02.2016 um 16:55 Uhr

    Super Slider, vielen Dank!
    Weshalb ist das margin-left: -40px bei .slideControl notwendig?

    • Geschrieben von: Jan
    • am: 28.02.2016 um 12:05 Uhr

    Die Liste ist absolut positioniert. Damit sie zentriert steht, wird sie vom linken Rand mit 50% positioniert (Zeile 471 im CSS) und muss dann noch mit der halben Gesamtbreite (Zeile 468) wieder nach links geschoben werden.

    • Geschrieben von: Oll
    • am: 09.03.2016 um 16:37 Uhr

    Sehr schöne Lösung - habe nur ein Problem. Beim Verschieben bleiben immer links ca. 5% des alten Bildes stehen. Habe beim Testen bisher die Bilder aus dem Beispiel in 600x400 genutzt.

    • Geschrieben von: Jan
    • am: 17.03.2016 um 11:43 Uhr

    Ohne Quellcode lässt sich dazu nicht viel sagen. Vielleicht irgendeine andere CSS-Anweisung, die an dieser Stelle ungewollt dazwischen grätscht? Vielleicht irgendwo ein Tippfehler drin?

    • Geschrieben von: Johannes
    • am: 03.04.2016 um 21:43 Uhr

    Schöne Lösung. Ein Gedanke zur Vereinfachung:
    Zach Saucier hat hier: https://css-tricks.com/css-animation-tricks/ gezeigt, dass eine Animation recht einfach mittendrin gestartet werden kann: mit negativem animation delay. Dabei wird der Animation vorgegaukelt, dass ein Teil schon vorbei sei, und sie springt quasi bei der aktuellen Stelle rein.

    • Geschrieben von: Jan
    • am: 04.04.2016 um 11:59 Uhr

    @Johannes: Danke, ein sehr guter Hinweis - nach einer Möglichkeit Animationen an beliebiger Stelle zu starten habe ich schon lange gesucht. Spart in diesem kleinen Beispiel einige Zeilen Code ein.

    • Geschrieben von: Asmar
    • am: 01.05.2016 um 21:52 Uhr

    Super Anleitung! Das nenn' ich mal Skills! Eine Sache nur: es gibt nur Animationen, wenn das Bild schon in Bewegung ist. Wenn bei Stillstand auf einen der vier Punkte tippt wird nur überblendet … kann das behoben werden?

    • Geschrieben von: Jan
    • am: 02.05.2016 um 09:44 Uhr

    Kann ich so nicht reproduzieren. In welcher Konstallation (Betriebssystem, Browser) testest du?

    • Geschrieben von: Asmar
    • am: 02.05.2016 um 16:01 Uhr

    Wie kann ich machen, dass der Slider nur 50% der Breite einnimmt? So passen die Bilder nicht auf den Bildschirm.

    • Geschrieben von: Jan
    • am: 03.05.2016 um 12:18 Uhr

    Du kannst dem Slider eine beliebige Breite zuweisen. Im Beispiel ist das ganze Konstrukt (Slider und Steuerung) in einen Container (sliderWrapper) gepackt, d.h. es wäre am einfachsten eben diesem Element die gewünschte Breite mitzugeben.

    • Geschrieben von: Marv
    • am: 17.06.2016 um 23:07 Uhr

    Ist es möglich relativ einfach zusätzlich zu den Buttons zur Steuerung auch Arrows einzuarbeiten (mittig außen)?

    • Geschrieben von: Jan
    • am: 18.06.2016 um 09:29 Uhr

    Ja, funktioniert nach dem gleichen Prinzip wie hier skizziert: http://ebene11.com/imageslider-ohne-javascript.html#qcom62

    • Geschrieben von: ejomi
    • am: 05.07.2016 um 22:46 Uhr

    Diese (wirklich perfekte!) Lösung ist offenbar empirisch auf eine Slidergröße von 400x600px aufgebaut worden. Außerdem wurde ein äußerer Rahmen mit Innenabstand und Trennlinien fest vorgegeben.
    Die Klasse "sliderWrapper" gibt dazu von Hause aus folgendes vor:
    /* nur zur Deko */
    .sliderWrapper {
    position: relative;
    padding: 6px;
    border: 1px solid #ddd;
    margin-bottom: 40px;
    }

    … alles schick! Wenn man aber auf Rahmen und Abstände verzichten möchte (kein "padding", keine "border") und eine Grafik in einer anderen Größe auf die volle verfügbare Breite/Höhe darstellen möchte, kann es Probleme geben. Wie mein Vorredner hatte ich auch Probleme bei Einbindung anderer Bildgrößen und bin dabei auf eine Eigenart diverser Browser (Opera + Firefox) gestoßen: obwohl nirgendwo vorgegeben, werden automatisch willkürliche Randabstände erzeugt, welche die Slidebilder (nach rechts) verschieben und/oder in der Höhe abschneiden.
    Als "workarround" habe ich eine zusätzliche Klasse mit Namen "fitmargin" bereitgestellt, welche explizit Außen- und Innenabstände auf "0" erzwingt:
    .fitmargin {
    padding: 0;
    margin: 0;
    }

    Diese neue Klasse binde ich dann als zusätzliche Vorgabe für den Haupt-Container und die Ordered-List ein.
    Als Ergebnis fallen die merkwürdigen "Randerscheinungen" weg und das Bild wird in voller Breite (bzw. auch skaliert, bei veränderlichen Bildschirmbreiten) gezeigt. Dieses Workarround habe in diversen Vorlagen mit unzähligen, verschachtelten Abschnitten und aufwendigen Styles getestet - funktioniert! Vielleicht hilft dieser Tipp ja weiter.
    Ansonsten: Eine gelungene Ausarbeitung des Problems "Slider ohne Skript" - wirklich perfekt - Dank an den Autor!

    • Geschrieben von: Jan
    • am: 11.07.2016 um 12:37 Uhr

    Der Slider ist responsive, funktioniert also bei jeder Größe (zumindest in all meinen Tests). Dass hier Bilder mit einer Standardgröße von 400/600 Pixel drin sind, ist reiner Zufall. Es dürfen natürlich auch beliebige andere Inhalte sein.
    Um unerwünschte Abstände zu vermeiden, sollte man grundsätzlich ein CSS-Reset einbauen … wird in diesem Beispiel nicht explizit drauf eingegangen. Für diesen Slider essentiell: margin: 0; padding: 0; list-style: none; und nach der unsortierten Liste ein clearfix.

    • Geschrieben von: Nico
    • am: 13.08.2016 um 13:33 Uhr

    Hallo,
    ich habe noch nicht so viele Kenntnisse, was HTML&CSS angeht. Ich verstehe nicht ganz, wie die Zahlen unter Punkt 2 (Wechsel des ersten Slides ans Ende und zurück) zustande kommen. Ich habe 10 Bilder und daher als Standzeitwert 8% und als Animationszeitwert 2% gewählt.
    Ich würde mich freuen, wenn mir das jemand erklären kann.
    Danke

    • Geschrieben von: Jan
    • am: 17.08.2016 um 13:56 Uhr

    Die Frage ist, wann der erste Slide auf welcher Seite des Sliders stehen muss, damit nie eine leere Fläche sichtbar wird. In Deinem Beispiel erfolgt die letzte Verschiebung zwischen 98% und 100%, d.h. spätestens nach 98% muss der erste Slide ans Ende wandern. Sobald die Steuerelemente hinzukommen, wird man noch Fallunterscheidungen brauchen, an welcher Stelle die Animation gestartet wurde. Dabei muss man bedenken, dass der erste Slide die Summe aus Animationszeit und Standzeit eines Slides an letzer Stelle stehen muss.
    Zum nachvollziehen kann man in Zeile 295 das Abschneiden deaktivieren, dann sieht man recht schön, wann der erste Slide an welche Stelle springt.
    Allgemein ausgedrückt mit:
    Ts als Standzeit
    Ta als Animationszeit
    Sc als aktueller Slide
    Sg als Gesamtzahl der Slides

    muss der erste Slide von
    100 - Sc * (Ts + Ta)
    bis
    (Sg - Sc + 2) * Ts + (Sg - Sc + 1) * Ta
    auf der rechten Seite stehen.

    • Geschrieben von: Kirstein
    • am: 27.08.2016 um 01:55 Uhr

    Hi,
    sehr gute Arbeit :-)
    Wo kann ich in der ccs die Grösse des Slides ändern? Zeile
    Wo kann ich die Zeit zum nächsten Bild einstellen? Zeile
    mfg
    Kirstein

    • Geschrieben von: Jan
    • am: 28.08.2016 um 20:27 Uhr

    Größe: vgl. meine Antwort vom 03.05.2016, also in Zeile 450
    Zeit zum nächsten Bild: da müssen die Animationen entsprechend angepasst werden, also Zeile 1 bis 291

    • Geschrieben von: Sascha
    • am: 10.12.2016 um 20:50 Uhr

    Hallo Jan! Danke für die Anleitung und den Code! Ganz tolle Leistung!!!
    Ich habe bei dem Slider ein fünftes Bild eingefügt und gemäß den Comments im CSS-Code die Lines 305 und 326 entsprechend geändert.
    Leider ist es nun so, dass das fünfte Bild nur kurz angezeigt wird und dann zurück auf das erste Bild springt (und nicht slidet - wie in deinem Beispiel). Woran könnte das liegen?

    • Geschrieben von: Jan
    • am: 12.12.2016 um 13:43 Uhr

    Hallo Sascha,
    gibt es Dein Beispiel irgendwo zum anschauen? Ins Blaue geraten: hast du die Animationen auch an die Anzahl der Slides angepasst?

    • Geschrieben von: Sascha
    • am: 12.12.2016 um 15:01 Uhr

    Hallo Jan!
    Vielen Dank für die schnelle Antwort! Darf ich den Slider eigentlich frei verwenden? Sprich, ich würde ihn gerne auf einer Bildungsseite online stellen?

    • Geschrieben von: Jan
    • am: 15.12.2016 um 17:05 Uhr

    Mit dem Code kannst Du im Grunde machen was Du willst - nur nicht verkaufen, als eigenes geistiges Eigentum ausgeben o.ä.

    • Geschrieben von: Gerald
    • am: 05.05.2017 um 18:29 Uhr

    Hallo Jan,
    vielen Dank für das gut strukturierte Beispiel.
    Beim Nachbau habe ich das Problem, dass beim ersten Slide links ein kleiner weisser Rand frei bleibt und bei den folgenden Slides ein kleiner Rest vom vorherigen Bild zu sehen ist.
    Evt. ist dies das von von: Oll am: 09.03.2016 um 16:37 Uhr beschiebene Problem? siehe oben
    Bzw. könnte es auch an den im Beispiel umgebenen Objekt mit den Tabs HTML/CSS/ liegen?
    besten Dank

    • Geschrieben von: Navid
    • am: 08.05.2017 um 19:36 Uhr

    Hallo,
    funktioniert bestens, aber wie bekomme ich jetzt hin das die Bilder für einen längeren Zeitraum zu sehen sind, z.B. 10sec?

    • Geschrieben von: Jan
    • am: 06.06.2017 um 21:08 Uhr

    @Navid: Du musst die Dauer der Animation verlängern, also den Wert für animation-duration vergrößern.

    • Geschrieben von: Lena_125
    • am: 14.09.2017 um 02:52 Uhr

    Erstmal vielen Dank für deinen tollen Beitrag! Durch deine Erläuterungen konnte ich sehr viel nachvollziehen und verstehen, obwohl ich mich noch nicht allzu lange mit dem Thema HTML und CSS auseinandersetze.
    Eine Frage habe ich noch: bei mir werden bei der Browseransicht die Bilder einfach untereinander aufgelistet und zwischen denen stehen Teile aus dem Code. Was kann die Fehlerquelle dafür sein? Ich habe sowohl den HTML, als auch den CSS Code so von dir übernommen, wie beschrieben. Das was ja noch fehlte war folgendes:
    HTML:
    Blabla
    Dann dein Code

    CSS:
    body {
    Dein Codes
    }

    Habe ich vielleicht etwas vergessen? Alle Dateien befinden sich in einem Ordner und die Bilder habe ich entsprechend ausgewechselt, sollte also auch stimmen.
    Vielen Dank schon mal im Vorraus!

    • Geschrieben von: Jan
    • am: 19.10.2017 um 09:08 Uhr

    @Lena:
    Da dürfte irgendwo ein Fehler in Deinem Code sein. Wenn Du den irgendwo einsehbar machst, schaue ich gerne rein.

    • Geschrieben von: Gerald
    • am: 24.10.2017 um 23:38 Uhr

    Vielen Dank für das Slider Beispiel incl. Tutorial,
    habe dazu zwei Fragen:
    1. würde ich gerne die Dauer verlängern. Du schreibst als Antwort auf @Navid: Du musst die Dauer der Animation verlängern, also den Wert für animation-duration vergrößern.
    Die "animation-duration" findet sich nur nicht im css
    2. würde ich gerne weitere Bilder einbinden. Ein fünftes habe ich schon eingefügt und den Anpassungen im CSS gemacht. Das funktioniert soweit, nur nach dem letzten Slide springt die Animation wieder zum ersten und slidet nicht dorthin - wie es beim Ausgangszustand funktioniert.
    Vergleichbar mit dem Post von Saschaam: 10.12.2016 Ich habe dem gegenüber aber mehr verändert: Controls erweitert und überall wo 1 - 4 um ein fünftes Element erweitert
    besten Dank für eine Rückmeldung
    Gerald

    • Geschrieben von: Gerald
    • am: 13.12.2017 um 12:49 Uhr

    Hallo Jan,
    nochmals vielen Dank für das hervorragend dargestellte Beispiel eines Sliders. Ich würde gerne die Anzahl der Bilder auf 5 und ggf. mehr erhöhen.
    Die Codezeilen 300 326 hatte ich angepasst, habe aber das gleiche Phänomen wie Sascha. Das fünfte Bild wird nur kurz angezeigt und springt dann zurück auf das erste Bild.
    Könntest Du Deine Hinweise vom 28.08.2016 und 12.12.2016 bzgl der Animation noch erläutern "…Ins Blaue geraten: hast du die Animationen auch an die Anzahl der Slides angepasst? … also Zeile 1 bis 291"
    Müßte ich hier jede Klasse anpassen: 4.Bewegung(ggf. weitere) einfügen, alle prozentualen Werte neu berechnen, 3. Animationen für den Farbwechsel in den Controls anpassen,… ?
    Auch in der Folge ab Zeile 336 gibt es weitere Klassen wie #slide04:checked ~ .slideList .slide, und weiter #slide01:checked ~ .slideList {, die offenbar auf 4 Slides ausgelegt sind, müssten hier auch Anpassungen erfolgen, also 05 06 ergänzt werden?
    mit besten Dank für Deine Hilfe
    Gerald

    • Geschrieben von: Jan
    • am: 04.01.2018 um 00:28 Uhr

    Hallo Gerald,
    die Dauer der Animation steht in Zeile 354.
    Das Sprungproblem wird vermutlich an einer fehlenden/falschen Animation für den ersten Slide liegen (hier in Zeile 131 ff.) … ist ohne Code aber nur geraten.
    Zu den beiden Fragen nach den zusätzlichen Deklarationen: Ja, die müssen geschrieben werden, wenn man den ganzen Steuerungskrempel haben möchte. Das Beispiel hier ist auf exakt vier Slides ausgelegt.

    • Geschrieben von: Kerrie
    • am: 23.01.2018 um 20:21 Uhr

    Hallo Jan,
    Vielen Dank für die tolle Anleitung. Jedoch habe ich das gleiche Problem, wie ein paar schon geschrieben haben: Ich habe deinen Code 1:1 übernommen und nur die Grösse und die Bilder geändert jedoch habe das Problem, dass ich beim ersten Slide links ein kleiner weisser Rand frei bleibt und bei den folgenden Slides ein kleiner Rest vom vorherigen Bild zu sehen ist.
    Ich arbeite noch nicht sehr lange mit HTML und CSS und find den Fehler nicht.
    Hier wäre der Link: http://umsetzung.v1.kerriebu.myhostpoint.ch/
    Vielen Dank für deine Hilfe.
    Kerrie

    • Geschrieben von: Jan
    • am: 28.01.2018 um 14:05 Uhr

    Hallo Kerrie,
    ich habe es nicht explizit geschrieben: ich gehe davon aus, dass grundsätzlich ein Browser-Reset eingebaut wird.
    In Deinem Beispiel hat die .slideList noch einen Innenabstand nach links. Habe es jetzt hier auch nochmal in den CSS-Code mit reingeschrieben (Zeile 312).

    • Geschrieben von: Hendrik Wiedermann
    • am: 08.04.2018 um 18:31 Uhr

    Vielen Dank für die tolle Arbeit.

    Gibt es eine Möglichkeit, eine Art PAUSE Button in dieses Script einzubauen?

    • Geschrieben von: Jan
    • am: 11.04.2018 um 16:28 Uhr

    Ja, funktioniert mit animation-play-state: paused;.

    • Geschrieben von: JoCa
    • am: 23.07.2018 um 18:22 Uhr

    Hallo, ich traue mich eigentlich gar nicht meine Frage zu stellen…

    Ich habe den Quellcode jetzt in zwei Dateien Kopiert. Die erste Datei heist slider.html in der hab ich den Quellcode aus dem Tab html eingefügt. die zweite Datei heißt slider.css in diese habe ich den Quellcode aus dem CSS Tab kopiert. Desweiteren habe ich noch ein Unterverzeichnis erstellt in dem die Bilder sind.
    Öffne ich die Seite auf der der Slider angezeigt werden soll, dann sehe ich die Bilder untereinander - sie sliden nicht… :-(

    Wo hab ich meinen Fehler ? Wo sehe ich den Wald vor lauter Bäumen nicht ?

    Danke für Eure Hilfe

    • Geschrieben von: Jan
    • am: 02.08.2018 um 21:14 Uhr

    @JoCa: Ich würde vermuten, dass die slider.css nicht bzw. nicht richtig (Pfad falsch, Tippfehler etc.) eingebunden ist.

Meine Meinung

Andere Meinung? Fragen? Ergänzungen? Hier ist der Platz dafür. Bitte beachte: Da hier jeder schreiben kann, werden zum Schutz vor Spam und grenzwertigen Inhalten alle Kommentare vor der Veröffentlichung von mir gegengelesen. Deine E-Mailadresse wird ausschließlich für eventuelle Rückfragen und ggf. eine Benachrichtigung bei neuen Antworten verwendet und keinesfalls an Dritte weitergegeben.