Einfacher Slider - VanillaJs, CSS3, HTML5

[DevMat]

Grüße an alle!

Auffallend oft lese ich, dass "VanillaJs" mittlerweile so weit ist, dass man jQuery nicht mehr braucht. Da dachte ich mir "warum nicht endlich mal darauf hören und ein kleines Projekt in nativem JavaScript umsetzen".

Ich habe mittlerweile viele kleinere Scripte in VanillaJs portiert und erfolgreich responsive und auf mobilen Endgeräten zum laufen gekriegt aber ich glaube hier brauche ich Hilfe.

Aus aktuellem Anlass möchte ich also einen einfachen Slider programmieren. Die Lösung in meinem aktuellen Projekt benutzt den Slick-Slider der wirklich fantastisch funktioniert, für mich aber genau den Nachteile hat, dass er jQuery voraussetzt.

Ich möchte allerdings nicht den Slick-Slider kopieren. Ich dachte an eine einfache Variante wie sie z.B. Netflix o.ä. Plattformen verwenden:

• Einstellung ob Endlos-Slider
• Einstellung der Anzahl der Elemente die angezeigt werden
• Einstellung der Anzahl der Elemente die verschoben werden
• Buttons zur Navigation "Vor" und "Zurück"
• Responsive
• Unterstützung für touch-displays und "dragging" (kann man das zusammenfassen?)

Ich habe mir allerdings den vom Slick-Slider erzeugten HTML-Quelltext angeschaut und mir daraus diesen Code auf jsFiddle abgeleitet.

Ich bin nicht so fit im Umgang mit jsFiddle aber damit die Seite richtig angezeigt wird habe ich folgende Verzeichnisstruktur:

• index.html
• styles.css
• scripts.js
• fonts/Font Awesome 5 Free-Solid-900.otf
• fonts/OpenSans-Light.ttf
• 16-9/01.jpg bis 12.jpg mit 720px*405px

Die nächste Idee war, noch bevor die Buttons benutzt werden können, ein Drag-/Wisch-Event abzufangen. Allerdings lässt mich mein Ansatz auch img-Elemente mit der Maus greifen.

An dem Punkt warf ich zum ersten mal einen Blick in die Script-Datei vom Slick-Slider und wurde, zugegeben, in meine Schranken gewiesen was meine Programmierkenntnisse angeht. Nicht, dass ich den Code nicht nachvollziehen könnte aber bei mir sieht das irgendwie alles "anders" aus.

Jetzt bin ich hier und frage zum einen ob sich der Aufwand überhaupt lohnt und zum anderen ob ich überhaupt auf dem richtigen Weg bin?

Sollte ich, unter Berücksichtigung meiner Fähigkeiten, weiter daran arbeiten oder besser z.B. einfach beim Slick-Slider bleiben?

Was könnte ich besser oder wo könnte ich weiter machen?

Bin gerade in einer Sackgasse und hoffe ihr könnt mich in die richtige Richtung schubsen.

Beste Wünsche ins neue Jahr!

[marctrix]

Hej DevMat,

ich kann kein JavaScript, habe aber mal einen reinen CSS-Slider gemacht - nur um zu sehen, ob es geht.

Die Antwort: theoretisch ja, praktisch nein (für Screenreader ist der dazu nötige Checkbox-Hack verwirrend).

Das heißt, obwohl ich Dir bei Deinem Problem nicht weiterhelfen kann, kann ich Dir anbieten, meinen Slider zu nehmen und die Buttons per JavaScript umzusetzen.

Vielleicht nimmt dir das Arbeit ab.

CSS-Slider

Optionen für horizontales Scrollen oder andere Effekte wie überblenden lassen sich leicht ergänzen…

Marc

[Gunnar Bittersmann]

@@marctrix

praktisch nein (für Screenreader ist der dazu nötige Checkbox-Hack verwirrend).

In der Tat, „CSS only“ ist bei Interaktionen i.a.R. keine gute Idee; den Checkbox-Hack sollte man nicht verwenden, auch nicht den Radiobutton-Hack, um den es sich hier handelt.

Und man sollte Radiobuttons nicht wie Checkboxen aussehen lassen.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

praktisch nein (für Screenreader ist der dazu nötige Checkbox-Hack verwirrend).

In der Tat, „CSS only“ ist bei Interaktionen i.a.R. keine gute Idee; den Checkbox-Hack sollte man nicht verwenden, auch nicht den Radiobutton-Hack, um den es sich hier handelt.

Und man sollte Radiobutton nicht wie Checkboxen aussehen lassen.

Alles richtig. Darum ist es auch nur eine Spielerei in einem Codepen. Um den Slider produktiv einsetzen zu können, muss das alles über JS gelöst werden.

Wenn es denn überhaupt ein Slider sein muss (Es gibt mindestens 5 Gründe gegen Slider - tatsächlich sind es noch deutlich mehr).

Slider. Das Arschgeweih Tattoo für zeitgenössische Websites. Ich finde, man sollte auf den Toiletten von Webdesignerbüros Megaslider vorschalten, die erstmal 30 Sekunden laden, bevor man die Tür öffnen kann ;)

Marc

[Gunnar Bittersmann]

@@DevMat

Ein Anleitung, wie man ein Karussel für verschiedenste Nutzer (Maus, Touch, Tastatur, Screenreader, …) umsetzt und dabei auch Dinge wie lazy loading bedenkt, hat Heydon Pickering geschrieben:

☞ A Content Slider (Inclusive Components).

LLAP 🖖

[DevMat]

Hallo Gunnar!

Danke erstmal für den Link. Ich werde mich da einlesen. Ich habe allerdings eher auf ein paar konkrete Tipps, meinen Code betreffend, gehofft.

Mir fällt auch gerade auf, dass ich den post gestern nicht unbedingt mit den richtigen Schlagworten markiert habe. Das System ist für mich leider nicht sehr intuitiv. Natürlich müsste JavaScript als wichtigstes Schlagwort dastehen.

Beste Grüße!

[Der Martin]

Hallo,

Mir fällt auch gerade auf, dass ich den post gestern nicht unbedingt mit den richtigen Schlagworten markiert habe.

im Nachhinein ist es logisch, dass Javascript dazugehören sollte - immerhin steht's sogar im Titel.
Ich hab's mal als Tag ergänzt.

Das System ist für mich leider nicht sehr intuitiv. Natürlich müsste JavaScript als wichtigstes Schlagwort dastehen.

Während du deinen Beitrag schreibst, werden die Tags (maximal 3) in der Reihenfolge dargestellt, in der du sie auswählst. Beim späteren Anzeigen des Postings stehen sie aber immer in alphabetischer Reihenfolge, darauf hast du keinen Einfluss.

Ciao,
 Martin

PS: Ich wusste erst nicht, was du mit einem Slider meinst, der Begriff ist mir nicht vertraut. Ich dachte erst an einen Schieberegler als UI-Element (wie ein Scrollbalken).

[DevMat]

Hallo Martin!

Danke für die Ergänzung! Tatsächlich habe ich bei den Schlagworten überlegt und ein bisschen rumgeklickt. Soweit ich mich erinnere, habe ich dann zuletzt im entsprechenden Feld noch "JavaScript" eingetippt und Enter gedrückt. Damit wurde dann aber wohl direkt der post ohne eingetipptes Schlagwort abgesetzt. Aber nagel mich bitte nicht darauf fest. So genau habe ich da auch nicht aufgepasst...

Ich bemerke auch gerade, dass ich im nachhinein meine eigenen posts nicht mehr ändern kann. Klar bin ich nicht angemeldet aber die Session sollte mich doch auch identifizieren. Zumindest die Schlagwörter könnte man so besser korrigieren. Das wäre noch ein schönes feature.

Beste Grüße!

[Der Martin]

Hallo,

Tatsächlich habe ich bei den Schlagworten überlegt und ein bisschen rumgeklickt. Soweit ich mich erinnere, habe ich dann zuletzt im entsprechenden Feld noch "JavaScript" eingetippt und Enter gedrückt. Damit wurde dann aber wohl direkt der post ohne eingetipptes Schlagwort abgesetzt.

ja, das könnte durchaus sein. Das UI bei der Auswahl der Schlagworte/Tags ist tatsächlich ein bisschen seltsam. Man muss sie entweder mit einem Mausklick auswählen, oder mit der Tab-Taste das Feld verlassen, weil mit Enter genau das passiert, was du erlebt hast: Der Default-Button des Formulars wird ausgelöst, und das ist hier "Nachricht speichern".

Ich bemerke auch gerade, dass ich im nachhinein meine eigenen posts nicht mehr ändern kann.

Das kannst du, aber nur in einem kurzen Zeitfenster (AFAIR 10min nach dem Absenden), und nur dann, wenn es noch keine Antworten gibt. Der Grund ist, dass andernfalls der Text so geändert werden könnte, dass die Antwort sinnentstellt ist.
Deswegen ist dieses Privileg den Moderatoren vorbehalten.

Klar bin ich nicht angemeldet aber die Session sollte mich doch auch identifizieren. Zumindest die Schlagwörter könnte man so besser korrigieren. Das wäre noch ein schönes feature.

Die einen sagen so, die anderen so. ;-)

So long,
 Martin

[Christian Kruse]

Hallo DevMat,

Ich bemerke auch gerade, dass ich im nachhinein meine eigenen posts nicht mehr ändern kann. Klar bin ich nicht angemeldet aber die Session sollte mich doch auch identifizieren. Zumindest die Schlagwörter könnte man so besser korrigieren. Das wäre noch ein schönes feature.

Haken in die Checkbox „Identität merken“ machen ganz unten im Formular direkt über „absenden,“ dann kannst du das tun.

Freundliche Grüße,
Christian Kruse

[Mitleser]

Haken in die Checkbox „Identität merken“ machen ganz unten im Formular direkt über „absenden,“ dann kannst du das tun.

Habe ich so ähnlich jetzt schon ein paar Male hier gelesen und auch den Hintegrund verstanden. Da ich hier aber eigentlich nie Faden eröffne, sondern eher meinen Senf zu bestehenden dazugebe, habe ich die fragliche Checkbox nie gesehen.

Nun mal aus Interesse „neuer Beitrag“ gewählt und schwupps - da isse ja!

Ist das so gewollt? Das Vorfüllen von z.B. „Autor“ ist ja auch für nicht angemeldete ganz praktisch :-)

[Christian Kruse]

Hallo Mitleser,

Ist das so gewollt? Das Vorfüllen von z.B. „Autor“ ist ja auch für nicht angemeldete ganz praktisch :-)

Sagen wir es so: ich habe da nicht drüber nachgedacht 😉 ich schreibs mir mal auf. Bin aber gerade nicht zuhause, wird also ein paar Tage dauern.

Freundliche Grüße,
Christian Kruse

[Christian Kruse]

Moin,

ist jetzt umgesetzt. Anonyme User sollten jetzt prinzipiell die Option bekommen, ihre Identität in einem Cookie zu speichern.

Freundliche Grüße,
Christian Kruse

[Matthias]

Hallo Christian,

Zumindest die Checkbox ist zu sehen …

Matthias

[Matthias]

Zumindest die Checkbox ist zu sehen …

Es könnte verwirrend sein, dass die vorausgefüllten Input-Felder nicht mehr sichtbar sind.

Matthias

[Christian Kruse]

Hallo Matthias,

Zumindest die Checkbox ist zu sehen …

Es könnte verwirrend sein, dass die vorausgefüllten Input-Felder nicht mehr sichtbar sind.

Funktioniert schon seit V4 so 😉

Freundliche Grüße,
Christian Kruse

[Matthias Apsel]

Hallo Christian Kruse,

ist jetzt umgesetzt. Anonyme User sollten jetzt prinzipiell die Option bekommen, ihre Identität in einem Cookie zu speichern.

👍

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Der Martin

PS: Ich wusste erst nicht, was du mit einem Slider meinst, der Begriff ist mir nicht vertraut.

Die einen sagen slider, die anderen carousel.

Ich dachte erst an einen Schieberegler als UI-Element (wie ein Scrollbalken).

Um dieser Mehrdeutigkeit aus dem Weg zu gehen, gehöre ich zu den anderen.

LLAP 🖖

[Der Martin]

Hallo Gunnar,

PS: Ich wusste erst nicht, was du mit einem Slider meinst, der Begriff ist mir nicht vertraut.

Die einen sagen slider, die anderen carousel.

letzteres hätte mir mehr gesagt.

Ich dachte erst an einen Schieberegler als UI-Element (wie ein Scrollbalken).

Um dieser Mehrdeutigkeit aus dem Weg zu gehen, gehöre ich zu den anderen.

Okay, ich auch (wenn ich sowas überhaupt aus eigener Initiative nutzen sollte).

Ciao,
 Martin

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die einen sagen slider, die anderen carousel.

Ich dachte erst an einen Schieberegler als UI-Element (wie ein Scrollbalken).

Man kann mit einem Slider einen Slider steuern. 😄

LLAP 🖖

[Fred]

Moin Gunnar

Man kann mit einem Slider einen Slider steuern. 😄

Wieso lässt sich das nicht nachbauen? Meine JS Kenntnisse gehen eher gen Null. Das Konsolenlog zeigt:
TypeError: divElement is null

Fred

[Gunnar Bittersmann]

@@Fred

Wieso lässt sich das nicht nachbauen?

Du wolltest fragen: „Wieso kann ich das nicht nachbauen?“

Meine JS Kenntnisse gehen eher gen Null. Das Konsolenlog zeigt:
TypeError: divElement is null

Meine Kenntisse, was du da versucht hast, gehen eher gen Null.

LLAP 🖖

[Fred]

Du wolltest fragen: „Wieso kann ich das nicht nachbauen?“

Ich liebe dieses Forum 😉

Meine Kenntisse, was du da versucht hast, gehen eher gen Null.

So sieht es aus:

<!DOCTYPE HTML>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
	<title>Foto-Slider</title>
<style>
figure { margin: 0;}
div, figcaption, input {
	font: 1em/1.2 Calibri, sans-serif;
	width: 335px;
	max-width: 100%;
	margin-bottom: 0.4em;
	}
div {
	height: 335px;
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg/1024px-Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg);
	background-position: calc(var(--percentage, 0) * 1%) center;
	}
</style>
</head>

<body>
<script>
const divElement = document.querySelector('div');
const inputElement = document.querySelector('input');

slide();
inputElement.addEventListener('input', slide);

function slide(event)
{
	divElement.style.setProperty('--percentage', inputElement.value);
}

</script>

<figure>
	<div></div>
	<figcaption>Riesengebirge</figcaption>
</figure>
<input type="range" value="0" min="0" max="100" aria-label="slider"/>

</body>
</html>

[Gunnar Bittersmann]

@@Fred

<script>
const divElement = document.querySelector('div');
const inputElement = document.querySelector('input');
⋮
</script>

<figure>
	<div></div>
	<figcaption>Riesengebirge</figcaption>
</figure>
<input type="range" value="0" min="0" max="100" aria-label="slider"/>

Das Script wird zu einem Zeitpunkt ausgeführt, zu welchem die Elemente, nach denen gesucht wird, noch gar nicht im DOM sind. Dann sollte nicht verwunderlich sein, dass sie nicht gefunden werden.

script ans Ende des body setzen. Alternativ: DOMContentLoaded-Eventhandler.

LLAP 🖖

[Fred]

Mahlzeit,

Das Script wird zu einem Zeitpunkt ausgeführt, zu welchem die Elemente, nach denen gesucht wird, noch gar nicht im DOM sind. Dann sollte nicht verwunderlich sein, dass sie nicht gefunden werden.

script ans Ende des body setzen. Alternativ: DOMContentLoaded-Eventhandler.

faszinierend, kaum macht man es richtig, geht es.

Danke

Fred

[marctrix]

Hej DevMat,

Danke erstmal für den Link. Ich werde mich da einlesen. Ich habe allerdings eher auf ein paar konkrete Tipps, meinen Code betreffend, gehofft.

Ich kenne mich mit jsfiddle auch nicht so aus. Ich habe weder CSS noch das Ergebnis gesehen…

Zum JS kann ich leider nicht viel sagen, das sollten andere hier tun.

Marc