Ebene 11 Webentwicklung . AutoCAD . Schulung

Imageslider ohne Javascript Ein einfacher Slider mit reinem CSS

In diesem Artikel wird der Aufbau eines einfachen Sliders (z.B. für eine Bildergalerie) ohne den Einsatz von Javascript (also ausschließlich per CSS) erklärt. Diese Beschreibung ist als kleines weiterführendes Beispiel zu den Möglichkeiten der Pseudoklasse :checked, wie sie in Accordion, Slider, Tabs & Co. mit purem CSS beschrieben sind, zu sehen.

Skizze zur Funktion
Bestandteile eines einfachen Sliders

Die Strategie

Die Idee ist letzten Endes ziemlich simpel: Wir schieben ein Band von Elementen durch ein „Sichtfenster”. Welches Stück von dem Band sich dabei gerade im Fenster befindet, wird von Radiobuttons gesteuert. Das Ganze bekommt dann noch ein bißchen CSS als Makeup.

Das HTML-Gerüst

Wir brauchen:

  1. ein Sichtfenster (cssSlider)
  2. ein Band zum schieben (sliderElements)
  3. Radiobuttons zum steuern
  4. Labels für eine hübsche Navigation (slideControl)

Wie man diese Inhalte auszeichnet, hängt natürlich vom konkreten Einzelfall ab. Für dieses Beispiel habe ich folgende Bedeutungen angenommen: Der Container für den Slider hat keine semantische Bedeutung, deshalb ein div. Die einzelnen Slides sehe ich als beliebige Abfolge von einzelnen Elementen, deshalb die Wahl der unsortierten Liste, bei der jedes li einem Slide entspricht. Jedes dieser Slides besteht aus einem Bild und zugehöriger Beschreibung; ob das Konstrukt aus figure und figcaption korrekt ist, muss man im Einzelfall sehen. Die einzelnen input wären sicherlich auch sehr gut mit einer Liste ausgezeichnet, allerdings müssen wir darauf leider verzichten, da es in CSS keinen passenden Selektor (müsste ein Eltern-Selektor sein) gibt, um dann noch die einzelnen Slides in Abhängigkeit des Status der Radiobuttons ansprechen zu können. Bei den label haben wir das Problem nicht, da sie Kinder eines Geschwisterelements, also problemlos ansprechbar sind.


  • Hier könnte deine Beschreibung stehen.
  • Eine tolle Beschreibung
  • Die Beschreibung zum dritten Bild
  • Und noch ein toller Untertitel

Die grundlegenden Funktionen

Essentiell für die Funktion ist, dass wir die Slides nebeneinander bringen (also unser Band entstehen lassen) und dafür sorgen, dass sie am Rande des Containers (Sichtfenster) abgeschnitten werden. Der Übersichtlichkeit halber lassen wir den Slider hier generell über die komplette Seitenbreite laufen. Er funktioniert aber natürlich auch mit allen anderen Größenverhältnissen und kann selbstverständlich auch auf Mediaqueries reagieren.

Die Berechnung der Breiten ist bei der Arbeit mit Prozent evtl. auf den ersten Blick nicht sofort klar, aber wenn man bedenkt, dass sich die Angaben immer auf die Breite des Elternelements beziehen, nachvollziehbar. Die Gesamtbreite der Liste mit den Slides entspricht der Summe der Einzelbreiten. Jedes Slide ist 100% (des Elternelements) breit, bei 4 Slides ergibt sich also eine Gesamtbreite von 400%. Von dieser errechneten Gesamtbreite nimmt ein Slide den Kehrwert der Anzahl der Slides ein - bei 4 Slides also 1/4. Ein Viertel in Prozent auszudrücken, bekommen wir gerade so noch ohne Taschenrechner hin - es sind genau 25%.

.slider {
	overflow-x: hidden;
	/* width: 1000px; bei Bedarf anpassen, da hier 100% gewünscht sind, kann man die Angabe einsparen */
}

.sliderElements {
	width: 400%; /* Summe der Einzelbreiten der Slides */
}

.sliderElements > li {
	float: left;
	width: 25%; /* 100 durch Anzahl der Slides */
}

/* Clearfix für die Liste */
.sliderElements:after {
	content: ".";
	display: block;
	height: .1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
}

Soweit so gut. Den Wechsel der Bilder können wir über die Positionierung der Liste mit der Klasse sliderElements in Abhängigkeit des Status der Radiobuttons lösen. Also ein kleine Ergänzung im CSS:

.sliderElements {
	position: relative;
	left: 0;
}

.slider input:nth-of-type(2):checked ~ .sliderElements {
	left: -100%;
}

.slider input:nth-of-type(3):checked ~ .sliderElements {
	left: -200%;
}

/* Statt der Pseudoklasse nth-of-type können wir auch mit der ID des inputs arbeiten */
#slide04:checked ~ .sliderElements {
	left: -300%;
}

Die Verpackung

Damit aus dem Konstrukt ein ansehnlicher Slider wird, ergänzen wir noch ein wenig CSS. Fangen wir mit den weichen Übergängen von Slide zu Slide an. Die Positionsänderung soll nicht von jetzt auf gleich, sondern über eine Zeitspanne erfolgen - das Zauberwort heißt hier „Transitions”. Eine nette Eigenschaft, die CSS3 mit sich bringt und deren Einzelheiten hier zu erklären ein wenig zu weit führen würde. Wir nutzen sie trotzdem.

Bleiben nur noch die Radiobuttons und die Labels übrig. Erstere schieben wir über eine absolute Positionierung ins Nirwana. Letztere werden klassisch als Kreise mittig unter dem Slider angeordnet. Die kompletten CSS-Anweisungen im Überblick:

.sliderElements,
.sliderElements figure,
.sliderControls {
	margin: 0;
}

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

.cssSlider {
	overflow-x: hidden;
}

.sliderElements {
	list-style: none;
	position: relative;
	left: 0;
	width: 400%;
	margin-bottom: .8em;
	padding: 0;
	-webkit-transition: left .8s ease-in-out;
	-moz-transition: left .8s ease-in-out;
	-o-transition: left .8s ease-in-out;
	transition: left .8s ease-in-out;
}

.sliderElements > li {
	float: left;
	width: 25%;
	position: relative;
}

#slide02:checked ~ .sliderElements {
	left: -100%;
}

#slide03:checked ~ .sliderElements {
	left: -200%;
}

#slide04:checked ~ .sliderElements {
	left: -300%;
}

/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
	display: block;
	color: #fff;
	position: absolute;
	left: 0;
	bottom: 1em;
	padding: .4em;
	background: rgba(0,0,0,.5);
}

/* Bilder responsive */
.sliderElements img {
	width: 100%;
	height: auto;
}


/* inputs aus dem Blickfeld schieben */
.cssSlider input {
	position: absolute;
	left: -99999px;
}

/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
	text-align: center;
}

/* Controls nebeneinander bringen */
.sliderControls li {
	display: inline-block;
}

/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	display: block;
	cursor: pointer;
	background: #68B022;
	color: #68B022;
}

/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"] {
	background: #ddd;
	color: #ddd;
}

Lauffähigkeit und Fallback

Die Lauffähigkeit steht und fällt mit der Unterstützung der Pseudoklasse :checked. Alle modernen Browser und der IE ab Version 9 haben damit keine Probleme. Ähnlich sieht es mit der CSS3-Eigenschaft transition aus, wobei diese ausschließlich für den weichen Übergang genutzt wird, also nicht essentiell wichtig ist. Eine Möglichkeit des Fallbacks wird im Artikel Accordion, Slider, Tabs & Co. beschrieben. Wie sinnvoll diese bei einem Slider ist, muss jeder für sich selbst beurteilen. Im Beispiel auf dieser Seite würde im Fall der Fälle nur der erste Slide sichtbar sein

So sieht es aus


  • Hier könnte deine Beschreibung stehen.
  • Eine tolle Beschreibung
  • Die Beschreibung zum dritten Bild
  • Und noch ein toller Untertitel
.sliderElements,
.sliderElements figure,
.sliderControls {
	margin: 0;
}

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

.cssSlider {
	overflow-x: hidden;
}

.sliderElements {
	list-style: none;
	position: relative;
	left: 0;
	width: 400%;
	margin-bottom: .8em;
	padding: 0;
	-webkit-transition: left .8s ease-in-out;
	-moz-transition: left .8s ease-in-out;
	-o-transition: left .8s ease-in-out;
	transition: left .8s ease-in-out;
}

.sliderElements > li {
	float: left;
	width: 25%;
	position: relative;
}

#slide02:checked ~ .sliderElements {
	left: -100%;
}

#slide03:checked ~ .sliderElements {
	left: -200%;
}

#slide04:checked ~ .sliderElements {
	left: -300%;
}

/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
	display: block;
	color: #fff;
	position: absolute;
	left: 0;
	bottom: 1em;
	padding: .4em;
	background: rgba(0,0,0,.5);
}

/* Bilder responsive */
.sliderElements img {
	width: 100%;
	height: auto;
}


/* inputs aus dem Blickfeld schieben */
.cssSlider input {
	position: absolute;
	left: -99999px;
}

/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
	text-align: center;
}

/* Controls nebeneinander bringen */
.sliderControls li {
	display: inline-block;
}

/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	display: block;
	cursor: pointer;
	background: #68B022;
	color: #68B022;
}

/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"] {
	background: #ddd;
	color: #ddd;
}
  • Hier könnte deine Beschreibung stehen.
  • Eine tolle Beschreibung
  • Die Beschreibung zum dritten Bild
  • Und noch ein toller Untertitel

Kommentare (39)

    • Geschrieben von: femur
    • am: 08.03.2015 um 09:04 Uhr

    Schönes Beispiel, leider funktioniert es nicht, wenn ich es mit eigenen Bildern nachbaue.
    Egal ob ich das fertige script nehme oder alles selbst schreibe es werden keine Bilder angezeigt, hundertmal die Pfade geprüft, nix geht.
    Schade.

    • Geschrieben von: Jan
    • am: 09.03.2015 um 16:44 Uhr

    Da kann dir sicherlich geholfen werden, müsstest aber ein bißchen mehr dazu sagen, was du machst und was nicht funktioniert.
    Ansonsten bleiben nur die allgemeingültigen Hinweise: Ist das geschriebene HTML und CSS valide? Kann der Browser mit dem du testest die Pseudoklasse :checked und die CSS3-Eigenschaft transition? Stimmen alle Pfade?

    • Geschrieben von: suri
    • am: 21.04.2015 um 10:02 Uhr

    Funktioniert wunderbar bei 4 Bildern, bei mehr Bildern bekomme ich es nicht hin!

    Was muss ich ändern bzw. ergänzen?

    • Geschrieben von: Jan
    • am: 22.04.2015 um 08:04 Uhr

    Für die Anpassung an eine andere Anzahl von Slides sind nur die Zeilen 7 und 12 im ersten Teil des Abschnitts 'Grundlegende Funktionen' zu beachten. Bei der Gesamtbreite der Liste (Zeile 7) musst du dafür sorgen, dass alle einzelnen Slides nebeneinander passen, also einfach die Anzahl der Slides mit 100% multiplizieren. Damit ein einzelnes Element die richtige Breite hat, ist Zeile 12 verantwortlich - ist einfach der Kehrwert der Anzahl der Slides in Prozent ausgedrückt.

    Ein Beispiel für einen Slider mit 5 Bildern (Slides):
    a. sliderElements muss [Anzahl] * 100%, also 5 * 100% breit werden, d.h. in Zeile 7 steht dann width: 500%;
    b. Das einzelne Bild benötigt 100% / [Anzahl], also 100% / 5 Breite, Zeile 12: width: 20%;

    Die Navigation muss natürlich auch noch erweitert werden, also für den fünften Slide folgendes ergänzen
    .slider input:nth-of-type(4):checked ~ .sliderElements {left: -300%;}

    • Geschrieben von: Fou
    • am: 19.06.2015 um 23:42 Uhr

    Wenn ich das richtig verstanden habe, funktioniert es also nicht für eine dynamische Anzahl von Bildern? Oder speziell für eine variierende Anzahl von Bildern, z.B. zwischen 0 und 4?
    Danke.

    • Geschrieben von: Jan
    • am: 21.06.2015 um 19:53 Uhr

    Mit reinem CSS wirst du nicht auszählen können, wieviele Slides vorhanden sind, d.h. du musst für dieses Beispiel dem Slider eine Klasse mitgeben, anhand derer die passenden Styles für die verschiedenen Fälle angesprochen werden. Diese kannst du manuell mitgeben oder - wenn es dynamisch werden soll - natürlich auch durch eine Script- oder Programmiersprache einfügen lassen.

    • Geschrieben von: Tom
    • am: 25.06.2015 um 18:23 Uhr

    Hallo, erstmal vielen Dank für den tollen Artikel. Ich möchte diesen Slider auch gerne für ein aktuelles Projekt nutzen, habe aber ein Problem: der Slider ist bei mir nicht responsive. Auf kleinen Geräten werden die Bilder responsive verkleinert (img {max-width: 100%; height: auto;}) - dies führt aber dazu, dass ich unter den Bildern einen Abstand bekomme, durch die id="mask". Wenn ich diese über obige Strategie auch responsive machen möchte, verschwinden die Bilder.

    Vielleicht einen Tip für mich? LG, Tom.

    • Geschrieben von: Jan
    • am: 29.06.2015 um 15:33 Uhr

    Hallo Tom,
    durch das verkleinern der Bilder sollte kein Abstand entstehen. Aus dem Stegreif würde mir zwei Fehlerquellen einfallen:
    a. die Bilder haben unterschiedliche Proportionen, so dass nach der Skalierung (responsive) nicht alle die gleiche Höhe haben
    b. eine Kollision mit anderen css-Anweisungen
    Kannst Du einen Link posten, unter dem man die Problematik nachvollziehen kann?!

    • Geschrieben von: Tom
    • am: 07.08.2015 um 17:08 Uhr

    Super Ding! Läuft prima! Habe die Größe der Bilder angepasst und den Code entsprechend geändert, läuft!! Gibt es auch eine Möglichkeit die Bilder automatisch wechseln zu lassen?

    • Geschrieben von: Jan
    • am: 10.08.2015 um 11:20 Uhr

    Ein automatischer Wechsel ist per Keyframe-Animation möglich. Einen Ansatz dazu habe ich unter Slider als Keyframe-Animation mit CSS3 beschrieben.

    • Geschrieben von: Silke
    • am: 14.08.2015 um 14:13 Uhr

    Vielen Dank für das Tutorial, prima erklärt und leicht anzuwenden und anzupassen… Läuft! :-)

    • Geschrieben von: Annette
    • am: 07.09.2015 um 11:12 Uhr

    Schöner Slider! Leider bleibt bei mir links vom Bild immer das Aufzählungszeichen als Punkt sichtbar. Wie kann ich diesen "wegschieben" oder unsichtbar machen?

    • Geschrieben von: Jan
    • am: 07.09.2015 um 15:34 Uhr

    Guter Einwand, die werden hier über das generelle Reset der Seite ausgeblendet. Für den Slider im speziellen könnte man es z.B. über ein .sliderElements {list-style: none;} lösen. Ich habe es mal mit reingepackt (vgl. Zeile 22 des CSS-Teils).

    • Geschrieben von: Steffi
    • am: 10.11.2015 um 14:01 Uhr

    Die Erklärung ist super und die Gallerie auch! Ich benutze die jetzt für ein Projekt in meiner Ausbildung.
    Ich möchte einen One Pager machen. Dementsprechend sind die Elemente zu 100% an den Bildschirm angepasst. Bei Safari klappt alles super. Bei Firefox wird das Bild, welches in der width auf 100% skaliert wird, sogar weiter skaliert womit es nicht mehr in den Bildschirm passt. Gibt es dafür ne Lösung?

    Was mache ich es außerdem, wenn ich will, dass die Slider auf die Gallerie kommen? top: -100px ist eine Lösung, allerdings bleibt die Box ja bestehen.

    Hilfe, meine Lehrerin kann mir da auch nicht weiterhelfen.

    • Geschrieben von: Jan
    • am: 10.11.2015 um 18:45 Uhr

    Zu dem Breitenproblem lässt sich ohne Code nicht viel sagen - am besten ein Beispiel online zur Verfügung stellen.

    zu der zweiten Frage:
    Meinst du damit, dass die Figcaptions (Texte) sich erst auf das Bild legen sollen, wenn das Bild steht? Könnte man z.B. lösen, indem man:

    1. die figcaption außerhalb positioniert und dafür sorgt, dass über das umgebende Element laufende Inhalte abgeschnitten werden (overflow)
    2. in Abhängikeit des gewählten Radiobuttons die zugehörige figcaption wieder auf das Bild schiebt
    3. der Schiebeaktion aus Punkt 2 eine Verzögerung mitgibt (transition-delay)

    Muss natürlich keine Schiebeaktion sein, per transform lässt sich so ziemlich alles machen.

    • Geschrieben von: Urs
    • am: 22.04.2016 um 17:42 Uhr

    Toller Slider, funktioniert soweit einwandfrei. Gibt es eine Möglichkeit den Slider noch mit Navigations-Pfeilen links und rechts zu ergänzen?

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

    Navigationspfeile lassen sich nach dem gleichen Prinzip wie die Punkte hinzufügen. Für jedes Sliderelement müssen zwei Labels hinzugefügt werden, am einfachsten vermutlich in einer separaten Liste wie die Controls. Diese kann man dann in Abhängigkeit des Status der Radiobuttons sichtbar schalten und natürlich beliebig gestalten.

    • Geschrieben von: Martin
    • am: 02.06.2016 um 23:34 Uhr

    Hallo,
    ersteinmal vielen Dank für die ausfühliche und wirklich gute Erklärung. Ich hätte jedoch ein kleines Problem.
    Wenn ich auf dem gleichen Seite durch HTML zwei Mal den Slider einbaue (sprich um unterschiedliche Urlaubsfotos hochzuladen) dann rotieren die Bilder vom ersten Silder und anschließend von zweiten. D.h. ich muss zuerst die Bilder des ersten Silders mir anschauen bevor ich mir die vom zweiten Silder anschauen kann.
    Gibt es da eine Möglichkeit das zu beheben?
    Vielen Dank
    Martin

    • Geschrieben von: Jan
    • am: 03.06.2016 um 09:11 Uhr

    Ein Beispielcode wäre gut. Generell muss man darauf achten, dass die Bezeichnungen eindeutig sind, also keine ID doppelt verwenden und den Slidern unterschiedliche Namen geben (name-Attribut der inputs).

    • Geschrieben von: Ilka
    • am: 20.06.2016 um 09:45 Uhr

    Vielen vielen Dank für die übersichtliche Anleitung! Es funktioniert perfekt mit dem kleinen Zusatz für die responive img von Tom.
    Viele Grüße
    Ilka

    • Geschrieben von: Deniz
    • am: 04.07.2017 um 03:16 Uhr

    Das funktioniert super mit bis zu 6 Bildern. Aber ab 7 Bilder verrutscht das letzte Bild eine "Zeile" Runter. Die gesamtbreite 700% und die jeweilige Bildbreite auf 14.29% aowie die Radiobuttons sind angepasst. Verstehe nicht was ich falsch mache.

    • Geschrieben von: Tom
    • am: 05.07.2017 um 11:00 Uhr

    Wäre cool, wenn jemand noch Mal ein Beispiel hat, wie man eine links rechts Navigation statt mit Zustandsorientierten Kontrollflächen macht. Quasi statt für jedes Bild einen Punkt zu haben, wo man raufklickt, einfach nur einen Pfeil für nächstes Bild und einen Pfeil nach links für vorheriges Bild macht. Und das alles bitte ohne javascript.

    • Geschrieben von: Jan
    • am: 08.07.2017 um 20:13 Uhr

    @Deniz: Das liegt an der Rundung - 7*14,29=100,03 … der Slider wird also einfach zu breit. Meint im Umkehrschluss: die einzelnen Breiten dürfen niemals aufgerundet werden.

    • Geschrieben von: Deniz
    • am: 13.07.2017 um 14:41 Uhr

    Danke, genau das ist es gewesen.

    • Geschrieben von: mae
    • am: 06.08.2017 um 20:13 Uhr

    Bei mir Funktioniert der Slider wirklich gut, allerdings ist das erste Bild nicht zentriert und ein Stück davon ist aufgrund dessen auch nicht sichtbar (text-align: center; ist eingestellt). Beim Wechseln zwischen den Bildern kann man das dann besonders sehen, da stets dieses verdeckte Stück des vorherigen Bildes nun neben dem nächsten Bild erscheint.
    Wie kann ich das beheben?
    Vielen Dank
    mae

    • Geschrieben von: Marc
    • am: 17.08.2017 um 10:36 Uhr

    Danke für dieses Tutorial.
    Ich habe das Ganze nun mal in ein Projekt eingebaut, aber leider funktioniert es nicht zu 100%. Ich habe den Slider auf 5 Bilder angepasst und die bekomme ich auch alle durch klicken auf den entsprechenden Radio-Button angezeigt. Allerdings ist es so, dass am linken Rand immer ein kleiner Rest vom vorherigen Bild zu sehen ist.
    Ich habe mir den Code nun bereits mehrmals genau angesehen, aber ich finde nichts :-) Woran könnte das denn liegen?
    (Leider kann ich meinen Code nicht hochladen, um ihn euch zeigen zu können)

    • Geschrieben von: Sonja
    • am: 06.09.2017 um 17:57 Uhr

    Ich habe den Slider an meine Website angepasst und es klappt alles super (das erste mal seitdem ich sehr viel verschiedene Sachen ausprobiert habe die nicht funktioniert haben) Ich habe trotzdem ein Problem:

    Nachdem ich die Größen verändert habe gehen die grünen Control punkte nicht weiter nach oben. Ich habe alles probiert schaffe es trotzdem nicht.

    Was soll ich tun?

    • Geschrieben von: Jan
    • am: 12.09.2017 um 21:21 Uhr

    @ mae, Marc und Sonja: ohne den zugehörigen Code ist Hilfe schwer möglich bzw. Raterei, deshalb bitte ein Beispiel zur Verfügung stellen.

    • Geschrieben von: Daniel
    • am: 20.10.2017 um 21:17 Uhr

    Servus. Des ist genau des wonach ich gesucht habe. Werd es am Wochenende direkt ausprobieren. Eins habe ich da noch, ich würde es gern mit dem Finger wischen können, ich das möglich? Gruß Daniel

    • Geschrieben von: Armin
    • am: 26.01.2018 um 09:18 Uhr

    Gibt es eine Lösung für das Problem von marc oder may?
    … ab dem zweiten Bild sind links Teile vom vorherigen Bild zu sehen.
    Ich habe das gleiche Problem
    Gruß Armin

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

    @Armin: Ohne Code kann man nur raten (Browser-Reset?) … halte ich aber nicht für effektiv. Deshalb bitte Code bereitstellen.

    @Daniel: Dazu ist mir leider keine Möglichkeit ohne den Einsatz von Javascript bekannt.

    • Geschrieben von: Armin Horner
    • am: 30.01.2018 um 09:19 Uhr

    Danke für den Hinweis.
    Der Slider ist unter ArminsBikeverleih.at
    Gibt es ein Problem im css?

    • Geschrieben von: Jan
    • am: 02.02.2018 um 07:14 Uhr

    Hallo Armin,
    die Liste (sliderElements) hat noch ein padding von den Browsereinstellungen. Wenn Du z.B. in Zeile 141 Deiner css noch ein padding: 0; packst, dann passt es.

    • Geschrieben von: Moritz
    • am: 06.02.2018 um 21:52 Uhr

    Hey, habe das gleiche Problem, wie Armin. Könntest du mal schauen, wie man das behebt? Habe ein padding bereits reingetan.
    http://tassilo.bplaced.net/Fechten/Index.html

    • Geschrieben von: Jan
    • am: 07.02.2018 um 10:18 Uhr

    Gleiches Problem, gleiche Lösung. Da steht noch das padding aus den Browsereinstellungen - ich habs jetzt hier im Beispielcode nochmal explizit ergänzt.

    • Geschrieben von: Moritz
    • am: 07.02.2018 um 18:11 Uhr

    Danke, funktioniert jetzt. Weißt wieso die Bilder bei mir so groß sind, trotz dass ich die Höhe und Breite in der HTML geändert habe?

    • Geschrieben von: Jan
    • am: 08.02.2018 um 08:35 Uhr

    Die Bilder werden per CSS (Zeile 64) auf 100% Breite gesetzt. Wenn der Slider insgesamt schmaler werden soll, einfach das umgebende Element (hier z.B. das cssSlider-div) schmaler machen.

    • Geschrieben von: Aileen
    • am: 16.04.2018 um 10:03 Uhr

    Hallo,
    vielen Dank für das Tutorial!
    Gibt es eine Möglichkeit, die label-Punkte unten durch kleine Bilder/Thumbnails zu ersetzen?
    Ich hätte gerne eine Art "Mini-Vorschau", anstatt grünen Kreise.

    • Geschrieben von: Jan
    • am: 18.04.2018 um 10:55 Uhr

    Ja - statt der Ziffern kannst du jeden beliebigen Inhalt ins label schreiben, also auch Vorschaubilder.

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.