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.
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:
- Die Definition der Darstellung eines Elements zu verschiedenen Zeitpunkten
- 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
animation-nameanimation-durationanimation-timing-functionanimation-iteration-countanimation-directionanimation-play-stateanimation-delayanimation-fill-mode
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: slide01ToEndStart01 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
Würfelkomposition
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
-
Würfelkomposition
-
Schnittkurve von Zylinder und Hyperboloid
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.
Kommentare (56)
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
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).Hallo,
wie groß muss jedes Bild sein? Bei mir ist immer an der rechte Seite etwas von dem Slider davor.
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.
Super Slider, vielen Dank!
Weshalb ist das
margin-left: -40pxbei.slideControlnotwendig?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.
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.
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?
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.
@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.
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?
Kann ich so nicht reproduzieren. In welcher Konstellation (Betriebssystem, Browser) testest du?
Wie kann ich machen, dass der Slider nur 50% der Breite einnimmt? So passen die Bilder nicht auf den Bildschirm.
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.Ist es möglich relativ einfach zusätzlich zu den Buttons zur Steuerung auch Arrows einzuarbeiten (mittig außen)?
Ja, funktioniert nach dem gleichen Prinzip wie hier skizziert: http://ebene11.com/imageslider-ohne-javascript.html#qcom62
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!
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.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
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) * Taauf der rechten Seite stehen.
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
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
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?
Hallo Sascha,
gibt es Dein Beispiel irgendwo zum anschauen? Ins Blaue geraten: hast du die Animationen auch an die Anzahl der Slides angepasst?
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?
Mit dem Code kannst Du im Grunde machen was Du willst - nur nicht verkaufen, als eigenes geistiges Eigentum ausgeben o.ä.
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
Hallo,
funktioniert bestens, aber wie bekomme ich jetzt hin das die Bilder für einen längeren Zeitraum zu sehen sind, z.B. 10sec?
@Navid: Du musst die Dauer der Animation verlängern, also den Wert für
animation-durationvergrößern.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!
@Lena:
Da dürfte irgendwo ein Fehler in Deinem Code sein. Wenn Du den irgendwo einsehbar machst, schaue ich gerne rein.
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
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
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.
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
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).
Vielen Dank für die tolle Arbeit.
Gibt es eine Möglichkeit, eine Art PAUSE Button in dieses Script einzubauen?
Ja, funktioniert mit
animation-play-state: paused;.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
@JoCa: Ich würde vermuten, dass die slider.css nicht bzw. nicht richtig (Pfad falsch, Tippfehler etc.) eingebunden ist.
Hey, sobald ich die Bilder einfüge, ist der Slider über die ganze Seite gestreckt, wie kann ich dies anpassen?
@Timo: Der Slider zieht sich die Breite vom übergeordneten Element. Also entweder diesem eine Breite mitgeben oder dem Slider direkt.
Hallo,
hätte auch wie Gerald grösstes Interesse an einem CSS Slider mit 5 Picture. Bin aber kein Fachmann und habe es nicht geschafft die keyframe Neuberechnung und sonst noch erforderlichen Ändeungen hierfür durchzuführen. Habe auch nirgendwo einen vergleichbaren schlichten aber trotzdem eindrucksvollen CSS Slider, vergleichbar mit diesem und 5 Bildern entdeckt.
Kann mir jemand einen Tipp geben ?
Gruss Helmut
Hallo,
ich habe den CSS Slider auf 3 Slider angepasst. Soweit funktioniert alles wie gewünscht. Sobald man aber auf einen Radiobutton klickt, kommt nach dem letzten Slide erstmal eine schwarze Fläche, statt der erste Slide. Auch die Radiobuttons sind nicht richtig aktiv. Irgendwo ist da der Wurm drin, nur wo? Kann mir jemand sagen, wo der Fehler liegt?
Hier könnt ihr den Code anschauen: https://codepen.io/sonjadegen/pen/zbvLRp
Besten Dank schon mal.
Wie immer finde ich die Lösung, wenn ich nachgefragt habe, von selbst. Der Fehler der aktiven Radiobuttons lag darin, dass ich nicht überall den vierten Slide vom ursprünglichen Code gelöscht habe. Zudem waren die %-Angaben in der "slide01ToEndStart02"-Animation falsch. Nun funktioniert alles wie gewünscht.
@Helmut: An welcher Stelle kommst Du mit den Neuberechnungen nicht klar bzw. wie sieht Dein Ansatz aus?
Ich habe mir das Script heruntergeladen. Und ich habe es in ein HTML File mit einem Link zu m CSS kopiert … das müsste eigentlich jetzt laufen. Tut es aber nicht … ich finde nicht heraus warum das nicht läuft. Mein Werk ist auf mail2vip.com/vpp zu finden … es heisst keyframeslides.html und das CSS ist im Ordner CSS.
Kannst Du bitte nachschauen, was ich da falsch gemacht habe.
Danke
John
@John: Die externe css wird bei Dir nicht interpretiert.
Hallo,
Ein wirklich toller Slider.
Wie kann ich die Anzahl der Slides auf 10 Bilder ehöehen?
Was muss ich in welcher Datei (html und css) alles ändern?
Ich habe es probiert komme aber leider ohne Hilfe nicht zurecht.
Danke im Voraus für Unterstützung.
Viele Gruss
Mit dem IE11 geht alles, aber der neue Edge Browser von Windows 10 macht Probleme, auch hier in der Demo.
Sobald das zweite Bild rein geslidet ist und der zweite Radio Button aktiv wird, verutscht plötzlich das Bild, danach stimmt die ganze Animation nicht mehr.
Nachtrag zu meiner vorigen Meldung: Es funktioniert nicht mit MS Edge 42 (EdgeHTML 17), jedoch mit MS Edge 44 (EdgeHTML 18).
Vor daher könnte man das vernachlässigen.
Hey Jan,
ich würde gerne mehrere Slider auf einer Seite einfügen, allerdings läuft dann immer nur einer, muss ich diesbezüglich irgendwas anpassen?
Man muss schauen, dass sich die nicht gegenseitig ins Gehege kommen, d.h. vor allem bei der Steuerung auf eindeutige Bezeichnungen (ID) achten.
Guten Tag,
eine wirklich tolle Lösung. Bei mir springt die Seite immer wieder an den Anfang sobald ich einen der Bulletpoints drücke, sodass der Nutzer runter scrollen müsste um wieder zum Slider zu gelangen. Haben Sie eine Idee woran das liegen könnte?
@Madeleine: kann man sich das Sprung-Verhalten irgendwo anschauen?
Oh da habe ich wohl wirklich noch nicht alle Kniffs und Tricks zu Animation-Slidern gelernt oder kennen gelernt.
Hallo an euch alle :-)...,
Na, zuerst möchte ich Jan und seinem Team danken, dass ihr euch die Mühe macht, uns so tatkräftig unter die Arme zu greifen, sollte mal was nicht so funktionieren. Dieser Keyframe-Slider ist so eine Bildergalerie, die ohne eure Hilfe sicher nur wenig Anklang finden würde. Auch ich war wieder einmal auf der Suche nach einer guten Galerie, damit ich meinen Lesern meine Romane/Bücher gut präsentieren kann. Daher ich mir, Jan, diesen Slider ausgesucht und ihn implementieren wollte. Aber ich bin wohl ein echter Grünschnabel ;-).
Warum?
Ich weiß nicht wie in diesem Script Keyframe 3 in der Bemessung funktioniert. Hier geht es meiner Meinung nach um die Positionierung der Bullets. Aber das kann ich nicht genau deuten. Daher ich mal den Abschnitt hier eingebe:
/* 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;}
}
Das ist der Code, den dein Team, Jan, freigegeben hat. Warum muss der Farbwechsel in diese Frames gebettet werden? Ebenso komme ich nicht mit der Berechnung klar, die du und dein Team hier eingegeben habt. Woran sich die Frage erschließt, welchen Sinn diese Berechnungen haben und wie ihr auf diese verwirrenden Berechnungen kommt. Ich habe fünf Images in den Slider aufgenommen. Alle Animationen zur Darstellung und zum Sliden funktionieren, nur eben dieser eine nicht. Was habe ich übersehen oder gar falsch interpretiert? Woher kommen die irritierenden Berechnungen? Oder ist mein gesamtes Script völlig falsch? Dabei bin ich mir sicher, dass nur in der CSS-Datei der Fehler steckt.
Deshalb komme ich nicht weiter und benötige mal einen Denkanstoß oder eine Erklärung über die Berechnung spezifisch des oben genannten Scriptes. Ich habe die Seite noch nicht veröffentlicht. Da ich fehlerhafte Scripts meinen Lesern nicht zumuten möchte :-).
Besten Dank an Euch...
MJE