DevMat: Einfacher Slider - VanillaJs, CSS3, HTML5

Beitrag lesen

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!