Erstelle eine Slideshow mit HTML, CSS und JavaScript - Programmieren Tutorial für Anfänger - Deutsch
Вставка
- Опубліковано 16 лип 2024
- 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.
Link zu Teil 2 für die Automatisierung der Slideshow: • Die Slideshow zeitgest...
GitHub mit fertigem Code:
github.com/dev-planet-germany...
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 :)
Teil 2 (Automatisches zeitgesteuertes Weiterschalten) ist da: ua-cam.com/video/KrwvF8W6A6k/v-deo.html
danke, das hab ich gesucht :)
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 :)
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!
Vielen Dank für das freundliche Feedback! Es freut mich wirklich sehr, dass es dir gefallen hat und freue mich schon, dich bei zukünftigen Tutorials wieder begrüßen zu dürfen :)
Da stimme ich vollkommen zu. Bin total beeindruckt :-D
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
Vielen Dank für dein Feedback! Es freut mich sehr, dass dir das Video helfen konnte - viel Erfolg bei deiner Klausur!
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.
Danke für dein Feedback! Das mit dem Timer ist eine sehr gute Idee... vielleicht gibt es ja mal ein Folgevideo :)
Danke für das tolle Video.
Danke für das Lob!
danke für die verständlichen Step by Step Erklärungen. Du hast mir sehr geholfen!
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.
Vielen Dank :)
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
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.
Mehr gelernt als in einem Jahr Fachinformatiker Ausbildung, sehr gut und genau erklärt
Ja, die Fachinformatiker-Ausbildung ist leider sehr realitätsfern, besonders der schulische Teil. Habe das selbst auch durchgemacht... Ist aber im Zertifikateland Deutschland neben dem Studium immer noch die beste Möglichkeit, an einen Job in dem Bereich zu kommen 😅
@@DevPlanetGermany Bei mir ist es eine rein schulische Ausbildung über 3 Jahre, daher habe Bzw hatte ich noch keine Berührungspunkte wie es in der Realität wirklich ausschaut. Aber wie du schon sagst, bei uns stehen regelmäßig Firmen vor der Tür um die Schüler aus den Abschlussklassen anzuwerben. Ist doch ein sehr gefragter Beruf.
Besser geht nicht!!! So happy und dankbar für dieses Tutorial!
Vielen Dank für das Feedback! :)
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!!
Vielen Dank für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Sehr tolles Tutorial, vielen Dank! Hat Spaß gemacht mitzumachen!
Das freut mich sehr! :)
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!!
Danke für das Feedback! Es freut mich sehr, dass dir das Video gefällt :)
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
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
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
Vielen Dank für dein Feedback und die motivierenden Worte! :)
Sehr schön erklärt. Danke für die Mühe.
Danke für das Feedback! :)
Top Video,
gut Erklärt,
genau das was ich wollte, danke.
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
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
Vielen Dank für dein Feedback! Es freut mich sehr, dass dir das Video gefällt und sorry für den geraubten Schlaf :)
@@DevPlanetGermany Wenn man was geschafft hat, kann man doch viel besser schlafen ;)
Vielen Dank für das gute Tutorial! Es funktioniert wunderbar und ist leicht verständlich. Weiter so!
Vielen Dank für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Richtig gutes Video, du hast mir sehr weitergeholfen. Danke.
Das freut mich sehr! :)
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.
Vielen Dank für dein Feedback und die motivierenden Worte :)
Vielen dank für das tutorial war sehr hilfreich und gut erklärt
Danke für das Feedback! :)
mega cool danke
Super erklärt, direkt Abo da gelassen
sehr gut erklärt bin fasziniert. TOP. Abo, Like, Kommentar ist das Mindeste.
Danke :)
Du rettest mein Studium :D
sehr gute Arbeit, vor allem wie du immer die Connectives/Verbindungswörter kombinierst, meine Englischlehrerin würde dich lieben :)
Danke für das Feedback! :)
Ich habe bis zum Ende geschaut (weil interessant), ich habe auch "Daumen hoch" gegeben (weil klar und verständlich) nur mit Abo ist schwer(ich habe ja schon eins und zweimal geht nicht)
Danke für dein Feedback! :)
Die Sache mit dem Abo sei dir verziehen (weil gute Begründung) 😉
Besser und einfacher kann man es nicht erklären, dafür schon mal ein Riesen dank und Lob.
Mich würde noch interessieren, wie man in das Konstrukt noch einen Timer zusätzlich einbaut, der das bild nach einer Gewissens Sekunden Anzahl, selbst ändert, weil ja die Funktionen erst beim klicken reagieren.
Leider etwas verspätet, aber hier die Antwort: ua-cam.com/video/KrwvF8W6A6k/v-deo.html
Ich hoffe, es hilft :)
top!
Danke :)
gutes Video
Danke :)
ehrenmann
Ich hoffe es kommt bald ein neues tutorial
Hervorragend erklärt - vielen Dank.
Nur noch zwei kleine Themen: Ist var nicht "deprecated" und let unter JS6 zu verwenden? Die Slideshow passt sich leider nicht der Höhe der Bilder automatisch an, hier ist bei unterschiedlichen Höhen noch nachzuarbeiten.
Trotzdem noch einmal vielen Dank für das Tutorial.
Zuerst vielen Dank für dieses klasse Tutorial. Alles gut, bloss, was mache ich mit sehr vielen Bildern? Eine "dynamische" Lösung, die alle Bild-Dateien aus einem Verzeichnis abarbeitet? Geht so etwas? Und wenn ja, bräuchte ich Hilfe! Dank & Gruss
Super gemacht, genau für Anfänger auf diesem Gebiet perfekt erklärt und gut nachzubauen! TOP!
Ich habe nun noch versuch bei den einzelnen Slides Links zu hinterlegen, leider zieht aber immer nur der Link des obersten Slides.
Gibt es dafür eine Lösung?
Habe es genauso gemacht wie in dem Video aber bei mir schaltet es nicht um. 😵
Aber sehr gutes Erklärvideo! 🎉
kann ich die Slideshow statt in den body in einen div class rein machen. Will die slideshow in eine schon vorhandende website einfügen
bei mir ist ein Problem auf getreten, ich wusste nicht wo es lag also hab ich exakt deinen Code von html/js/css kopiert.
Aber es ist noch immer da. wenn ich das nächste bild sehen will wierd es einfach nur weis angezeigt
Vielen Dank für das Tutorial.
Ich hätte noch eine Frage:
wie schafft man es, einzelne Bilder bzw. die Überschriften mit einem Link auszustatten?
Hey,
vielen Dank für das super Video. Ich hätte aber das Problem, dass ich die Slideshow nicht mit einem Layout von Matarial Lite kombinieren kann. Entweder ist alles in einer Rheine (ich denke wegen display:flex) oder die Slideshow funktioniert nicht mehr richrig. Weiß jemand was man da machen kann?
Vielen Dank für dieses super Tutorial. Ich könnte das super für meine Seite umsetzen.
Ich habe jedoch folgendes Problem:
Auf meiner Seite habe ich mehrere von diesen Slideshows eingebaut. Das führt dazu, dass beim laden der Seite zunächst das erste Bild der ersten Slideshow sichtbar ist. Wenn 8ch lang genug auf die Pfeile klicke, geht es irgendwann bei der nächsten Slideshow weiter.
Wie kann ich einstellen, dass die Funktion nur für die einzelnen Slideshows gilt?
Vielen Dank vorab.
Wie hast Du JS gelernt? Welche Sprachen kannst beherschen?
Hallo! Tolles Tutorial, aber ich habe eine offene Frage. Wenn man Links einfügt gibt es bei mir ein Problem. Denn es wird immer der Link des dritten Slides aufgerufen, da dieser scheinbar über den anderen liegt. Was kann man da machen?
so jetzt hab ich mir das endlich mal zu Ende angeschaut, wollte eigentlich was ganz anderes machen 😁 hab hier auch gleich mal mitgemacht, also selbst für Einsteiger ganz leicht und super nachvollziehbar, zweiten gugg ich mir natürlich auch noch an hab ja gerade Urlaub...kurze Frage, weil vielleicht hab ich das ja auch übersehen...hast du hier auch was zur Formularen und Validierung mit javascript? Falls nicht sowas wäre mal schön...gibt zwar einiges in englisch, aber mit Sprachen ist das so semi bei mir 😅
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Zu Formularen habe ich bisher nur ein HTML-Video. Die Validierung und Behandlung der Formulardaten mit JavaScript ist aber auch ein interessantes Thema, zu dem ich sicher ein Video machen werde. Vielen Dank für die Anregung! :)
Sehr schönes Tutorial! Ich habe es nach den Angaben realisiert. Leider funktioniert es nur im Edge richtig; im Chrome und Firefox ist die Darstellung auf der rechten Seite nicht korrekt, d.h. der Schatten ist zu lang und der rechte Pfeil ist nicht zu sehen.
Hey ich will eine Rating-Funktion erstellen. Ich wi
Hey ich will eine Diashow erstellen, in der man jedes Bild auf einer Skalar von 1 - 10 bewerten kann. Die Bewertungen werden gespeichert und die jeweiligen Bilder werden am Ende in einem Ranking dargestellt, welches die Bilder nach bewertung geordnet hat. Wie kann man soetwas schreiben? Oder wo könnte ich mich dafür einlesen?
Ich habe eigenes bild verwendet bei Hidden wird das bild nicht so abgeschnitten, wie ich es möchte .Wie kann man das Anpassen?
Hallo zusammen
Ich bin mehr oder weniger Anfänger und habe den CSS-Code genau so eingegeben wie erklährt.
Leider funktionieren bei mir folgende Befehle nicht:
justify-content: center;
align-items: center;
weiss jemand woran das liegen könnte?
Vielen Dank im Voraus!
Urs Fries
Könntest du noch ein tutorial machen wie man ein menu knopf mit verschiedenen themen machen wäre sehr nett ich finde du kannst das sehr gut mein respekt
Danke für das Feedback und die Idee :)
Super Video, habe allerdings das Problem das ich für das Problem mit dem Anfang und Ende der Bilder wo nach dem letzten Bild ein weißes folgt, trotz richtigem einsetzen die Fehlermeldung "Uncaught TypeError: Assignment to Constant variable.
Fehler befindet sich unter if(neuerIndex > slides.length -1) {
neuerIndex = 0;
Vllt kannst du oder jmd anders mir da weiterhelfen.. Danke im Voraus!
Bin absoluter Anfänger. hat soweit geklappt, nur irgendwie kann ich über die Pfeile nicht weiter schalten. hab alles verglichen aber mir fällt keine Abweichung zu deinem Code auf. Aber soweit sehr verständlich erklärt. Danke
Hey, ich vermute es wird daran liegen, das die Indikatorlieste über den Pfeilen liegt. Den diese wird wenn man über den Browser Inspektor schaut über die ganze Seite gezogen. Das kannst du recht schnell lösen,
Einfach *.css in der .indikatorliste
left 30%
right 30%
somit ist dieser Bereich wieder frei von dem transparenten Bereich der Punkte.
31:33 min, was wenn die Punkte nichtmeh4 zu sehen sind ? Danke
bei mir funktioniert schon seit anfang nicht. Ich kann der "body" nicht zenetrieren. Bleibt alles oben links :(
hi dev planet, danke für dieses mega geile tut !
ich hätte eine frage bei mir funktioniert die texteinblendung nicht also die ist nach wie vor hinter dem bild, bi ndas video nun 3 mal durchgegangen aber ich finde meinen fehler dazu nicht.
hast du zeit um mal darüber zu blicken ? :(
Danke für dein Feedback :)
In der Beschreibung des Videos ist ein Link zum GitHub mit dem fertigen Code - eventuell hilft es, wenn du deine Version mal mit meiner von GitHub vergleichst.
Wenn das nicht hilft, müsstest du deinen Code irgendwo hochladen, damit ich ihn mir anschauen. Ohne deinen Code zu sehen, ist es leider schwer bis unmöglich, herauszufinden, warum es nicht funktioniert.
@@DevPlanetGermany Habs im ende dann mit bootstrap gefixt, aber danke für die antwort, absolutes top video =) !
Super Erklärung!! Danke für die Anleitung, aber eine Frage bleibt bei mir offen. Wie bekomme ich die Slideshow responsiv, also das sich beim verkleinern des Fensters nicht alles so unschön verschiebt? hehe sorry irgendwas ist immer. :) LG
Noch eine zweite Frage, wie kann ich unter der Slideshow jetzt weiter Inhalte einfügen, ohne das diese von der Overflow "hidden" Funktion verdeckt/verschluckt werden?
Danke für dein Feedback und die Frage! Eine responsive Version der Slideshow findest du hier: github.com/dev-planet-germany/responsive_slideshow
Das lässt sich sicherlich noch vereinfachen, funktioniert aber fürs Erste ziemlich gut.
@@DevPlanetGermany Dankeschön!
Grüße, schönes Video, aber ich komme bei Minute 16.50 nicht weiter. Der align-items Befehl funktioniert bei mir nicht die Pfeile Rücken an den oberen Rand vom div. Kannst du helfen?
Hat sich erledigt es geht nicht responsive weil beim slide-container div eine feste Höhe festgelegt werden muss sonst greift die align-items Eigenschaft nicht. Auf height:Auto kann man es wohl nicht stellen? Gibts da eine andere Lösung!? Hätte gern eine slideshow über den kompletten viewport die beim verkleinern die Höhe anpasst...
Wenn du möchtest, dass die Slideshow immer den gesamten Viewport füllt, kannst du evtl. mit den Einheiten vw (viewport width) und vh (viewport height) arbeiten. Diese beziehen sich auf die Viewport-Breite bzw. Viewport-Höhe. 100vw entspricht also 100% der Viewport-Breite und 100vh entspricht 100% der Viewport-Höhe.
Ich habe das Tutorial nachgemacht und bekomme leider beim Javascript eine Fehlermeldung... "Uncaught SyntaxError: Unexpected identifier" für var aktueller Index = 0; (Zeile 7). Woran kann das liegen, was habe ich übersehen?
Du hast den Namen der Variablen "aktuellerIndex" getrennt geschrieben. JavaScript unterstützt aber leider keine Leerzeichen in Variablennamen - für JavaScript sind aktueller und Index so zwei unterschiedliche Bezeichner und deshalb kommt es zum Fehler. Wenn du es so änderst, dass aktuellerIndex zusammengeschrieben ist, sollte es also funktionieren :)
@@DevPlanetGermany Danke, es hat geklappt! Oh man, da habe ich wohl den Wald vor lauter Bäumen nicht gesehen 🙈
Noch schneller und komplizierter geht es nicht für absolute Code Anfänger?
Für jemand mit Erfahrung klingt das alles so logisch und leicht aber sicher nicht
für jemanden den man alles einzeln genauer erklären muss,
da sämtliche Erfahrung fehlt. Das schätzte ich am free code camp bzw. den Udemy Kursen.
hallo hat jemand eine idee wie ich die einzelnen bilder verlinken kann?
mit dem code geht es leider nicht.
Ja, ich habe dasselbe Problem. Wobei ich nicht das Bild verlinken will, sondern einen Link in der Beschreibung machen will, der dann zu einer Bildergallerie führt.
Kann mir da jemand helfen?
ehrenmann
Danke für den Kommentar :)