Erstelle eine Slideshow mit HTML, CSS und JavaScript - Programmieren Tutorial für Anfänger - Deutsch

Slideshows, Slider, Karusselle oder Galerien sind wichtiger Bestandteil der meisten Webseiten. Sie erlauben es uns, den Nutzern mehrere ähnliche Inhalte zu präsentieren und sie dabei nach Belieben durch die Inhalte navigieren zu lassen. Deshalb werden wir in diesem Video lernen, wie man genau so eine Slideshow mit reinem HTML, CSS und JavaScript erstellt und werden dabei einiges über Arrays und Array-ähnliche Objekte lernen.

GitHub mit fertigem Code:

00:00 Ziel des Projekts
00:20 Erstellen der HTML-Datei
00:52 Erstellen des Slideshow-Divs und der CSS Datei
01:27 Gestalten des Slideshow Behälters
02:32 Positionierung der Slideshow
05:10 Erstellen & Gestalten der ersten Folie
06:18 Einfügen & Gestalten des Bildes
08:15 Erstellen & Gestalten des Textbereichs
12:30 Erstellen der weiteren Folien
13:03 Erstellen & Gestalten der Pfeile
19:25 Erstellen & Gestalten der Navigationspunkte
25:05 Erstellen der JavaScript Datei
25:56 Elemente in JS anhand ihres Klassennamens auswählen
26:40 Konstanten in JavaScript
28:00 HTMLCollections, Arrays und Array-ähnliche Objekte
29:50 Zugriff auf Elemente in einem Array
30:09 Hinzufügen von Klassen für Elemente mit JavaScript
32:49 Die Funktion(en) für die Pfeile
36:30 Fehlersuche
38:09 Implementieren der Karussell Funktionalität
40:09 Implementieren der Navigationspunkte Funktionalität
42:19 Übergänge mit CSS Transition
43:55 Abonniert den Kanal :)

[Rockosunshine]

Danke, für das wirklich tolle Tutorial! Ich habe viel gelernt und die Stimme und auch die Art und Weise des Erklärens ist wirklich sehr angenehm :)

[simbabski]

Für mich meiner Meinung nach wahrscheinlich eins der besten Tutorials die ich mir anschauen durfte. Die Stimme sehr angenehm, nur das nötigste erwähnt und vorallem einfach zu verstehen + nachzumachen. Ich freue mich, wenn ich mehr Tutorials dieser Art sehen darf!

[ZrHaNy]

Mehr gelernt als in einem Jahr Fachinformatiker Ausbildung, sehr gut und genau erklärt

[carolaguldner]

danke, ich habe (ohne js Kenntnisse) endlich ein Tutorial gefunden, das bis auf ganz kleine Ausnahmen in einer brillanten Mitmach und verständlichen Erklärweise dazu führt, dass ich für meine Gedichtseite eine vernünftige Slideshow hinbekommen habe. Vielen Dank für deine Mühe

[tinahofmeister]

Ich hab jetzt in meiner Umschulung 1 Woche JS gehabt und 0, 0 verstanden :-D nun mit diesem Video bin Ich bestens für die kommende Klausur gerüstet. Vielen herzlichen Dank

[ratiomdrifixa]

Jetzt mal spaß beiseite einfach kann man es nicht erklären. Einfach perfekt für alle!!! Ich bedanke mich sehr ausserdem ist der code nicht zu kompliziert aber beinhaltet alles was man brauch.
Das einzige was man noch mit einfügen hätte können wäre ein timer in dem sich das bild nach einigen sekunden auch ohne drücken ändert. Aber dennoch ziemlich gut. Danke.

[christianstiegler]

Dankeschön für die Hilfe! habe es nachprogrammiert und es funktioniert endlich!

[brigittekoch]

Besser geht nicht!!! So happy und dankbar für dieses Tutorial!

[markuszimmer]

Danke für dieses geniale Video!
Bin absoluter Anfänger und bringe mir gerade das coden und später das scripten bei. Solche Videos helfen dann sehr um gewisse Bausteine von websites die man im Kopf hat, nachzubauen und zu verstehen.

[hotelnovember]

Sehr gutes Tutorial, vielen Dank!! Selbst für mich als Einsteiger gut verständlich und vor allem hilfreich gewesen, so etwas wie eine Struktur zu erkennen und zu entwickeln!!

[AsimYilan]

Du bist der Beste. Hatte sehr viele Tutorials mir angesehen aber so wie die Logik hier und die kompakte Schreibweise erstellt wurde wird man wirklich helle im Kopf. Abo + Glocke kann ich da nur an alle sagen

[MARieck-ujlq]

Zu Recht keine Dislikes. Perfekt erklärt mit angenehmer Sprechstimme. Meiner Meinung nach eines der besten Tutorialvorgehensweisen. Man merkt wie viel Mühe du dir gegeben hast, das Video entstehen zu lassen.

[suryaschafer]

Vielen Dank für das tolle Tutorial!! Es hat mir sehr geholfen und ich habe dank den vielen tollen Erklärungen nicht einfach nur abgeschrieben, sondern auch alles verstanden. Großartig!!

[DolchstarLP]

Deine Videos sind halt einfach super. Erst die Pikachu Website und jetzt der Slider/Carousel. Man kann dir super folgen und du erklärst das alles super gut. Gerade als NOCH einsteiger sind deine Videos Gold wert. Danke dafür :)

MfG
Dominik / Raijin

[mixedgt]

Also egal was du sonst so machst, das war sehr gut. Die Erklärungen sind Always onpoint und man konnte wirklich jeden Schritt logisch nachvollziehen. Abo und Glocke sind raus. Beeindruckent gutes Video. Ich hoffe du machst weiter.

[nimras]

danke für die verständlichen Step by Step Erklärungen. Du hast mir sehr geholfen!

[ecki]

Sehr tolles Tutorial, vielen Dank! Hat Spaß gemacht mitzumachen!

[valkyrja]

Ich glaube, ich habe noch kein Tutorial gesehen, das so perfekt ist. Vielen Dank! Ich bin total übermüdet und trotzdem hat es problemlos geklappt. (Mit persönlichen Anpassungen, ohne 1:1 nachzubauen) Dank der sehr guten Erklärungen ist auch alles nachvollziehbar. Das mit dem Schlafen hat sich wohl erledigt, weil ich mir noch das nächste Video ansehen muss XD

[MrTaddel]

Vielen Dank für das gute Tutorial! Es funktioniert wunderbar und ist leicht verständlich. Weiter so!

[NEWTONMETER]

Richtig gutes Video, du hast mir sehr weitergeholfen. Danke.