Bild-Slider mit JavaScript

1. Einführung: Okay, Leute in diesem Projekt, wir bauen den Karussellschieber und wir haben hier die Pfeile, die wir austauschen können. Zwischen diesen verschiedenen Schiebereglern können wir so viele setzen, wie wir wollen. Also haben wir diese Pfeile hier drin und wir haben auch diese Gedanken wie die Angabe in jedem Welche aus den Schiebereglern. Wir hatten im Moment eine, damit wir hier sehen können. Wir hatten in der ersten. Wir sind in der zweiten, wo in der dritten, und wir können so viele hinzufügen, wie wir wollen. Also für diesen Kurs, müssen Sie nur wissen, die Grundlagen von HTML und CSS in ein wenig Job ist großartig. Aber keine Sorge, denn ich werde alles über die wichtigsten Dinge abdecken, die du wissen musst. Und ich gehe mit einem sehr langsamen Tempo. So können Sie wirklich verstehen, Dies ist ein wirklich gutes Projekt. Wenn Sie etwas in Ihr Portfolio setzen wollen und das ist nur, wie zeigt, dass Sie Javascript wie auf eine wirklich professionelle Art und Weise und die Yeah verwenden können , ich hoffe, Sie sind begeistert, dieses Projekt zu starten. Also werde ich im nächsten Video sehen 2. HTML Body: Na gut, Leute, lasst uns unser Projekt beginnen. Und das erste, was wir tun müssen, ist unseren Code-Editor zu öffnen. Ich verwende den Visual Studio-Code, wie Sie hier sehen können. Aber Sie können mit jedem der anderen genannten Editoren folgen, die viele da draußen so erhabene Atom und viele andere sind. Sie können eine schnelle Google-Suche durchführen. Ich benutze gerne Visual Studio kalt. Es ist kostenlos. Und wenn Sie mit mir dieses Projekt machen wollen, mit genau dem, was ich hier mache, können Sie es kostenlos herunterladen. Also, wenn Sie es tun, beginnen wir mit der Datei neue Datei, und ich werde diese als Index dot html speichern. Also gehe ich hier rein. Und wo ist es? Ich gehe. Ich habe diese hier gefaltet, und ich werde diesen einen Index dot html nennen. Ok. Und jetzt werde ich tun, ist ich werde HTML Visual Studio eingeben namens Ist diese Art von beendeter Abkürzung, dass, wenn Sie klicken, gibt es bereits einen Codeausschnitt, so dass Sie nicht alles eingeben müssen die ganze Zeit hier den Titel für Blodgett Karas Zellenrutsche. Die und ich hätten hier ein H eingelegt und hier drin. Ich setze Auto Rossell, Slither, und ich werde hier mit einem Deve anfangen. Die Klasse der Folien. Ich werde den Combo-Koffer hier reinbringen. Diashow. Ich konnte keinen Corn-Tainer sagen. Okay, also haben wir hier einen Fernseher, und was ich hier jetzt brauchte, ist, dass ich drei Schieberegler setzen werde, also muss ich hier drei Diebe erschaffen. Hoppla. Lassen Sie mich einfach loswerden, dass ich diese Deve mit den Krallen meiner Dias nennen werde. Okay, ich werde drei davon haben. 123 Okay, wir haben das hier, und das ist es, was ich im Moment brauche. Ich brauche nichts anderes. Jetzt. Ich werde hier oben reingehen, und ich werde einen AM-Link für das CSS setzen. Schau, es gibt ein weiteres Snippet hier, also muss ich nicht immer alles eingeben, also habe ich eine Verbindung mit der Beziehung des Stils. Mist. Hier werde ich meine CSS-Datei ablegen und das volle, was sein wird, werde ich hier reingehen . Dies ist mein Vater, wo ich meinen Index dot html, wenn Sie das gefaltete hier CSS erstellen, wie es denkt organisiert CSS Und da drin, das ist, wo ich diese Datei speichern werde. Also werde ich CSS und drinnen machen. Ich möchte diese Datei main über CSS aufrufen. Lassen Sie uns diese Datei jetzt speichern als und lassen Sie uns in den Hauptpunkt CSS Ich möchte es hauptsächlich nennen dot CSS Gonna setzen meinen Körper ist eine Hintergrundfarbe von Blau, nur um sicherzustellen, dass wir die richtige haben. Blau offen. Er ist hier drin. Uh, ich gehe hoch. Öffnen Sie die und sehen Sie, wir sind Karussellrutsche hier drin. Das ist, was wir im Hintergrund Farbe blau haben. Es funktioniert also. Das ist es, was ich wollte. Okay, Okay, wir haben eine Menge diese Rückgrate hier drin. Das ist das Skelett unserer m unseres Projekts. Ich will nur hier drinnen tun. Lassen Sie mich die einfach loswerden. Ich werde den Stern setzen. Dies ist genau so, als ob ich alles in unserem und in unserem Projekt anvisiere , und was ich gerne mache, ist nur eine Trennung von Null und den Rand von Null in als die Elemente einfüge sowie eine Bücher, Größenordnung Grenze Bücher, um nur sicherzustellen, dass, wenn ich mit einrichten wird alle Parteien und Ränder enthalten, um genau mit den Elementen, die ich will, zu haben. Okay, also habe ich das hier drin. Jetzt muss ich nur ein wenig Styling setzen. Ich wollte, dass mein h eins jemals eine Linie der Mitte auf der Seite zentriert. Ich möchte einen Rand oben von 80 Pixeln haben, und ich möchte einen Rand haben. Unten ab. Ah, 50 Pixel. Okay, mal sehen, was hier vor sich geht. Also bekam ich meine Carcelle Verleumdung Titel und dann, natürlich, ich habe diese Leben hier drin, die im Moment nichts zeigen, aber wir gehen, weil sie nichts haben. Sieh mal, sie sind völlig leer. Deshalb sehen wir nichts. Also, was ich jetzt hier drinnen machen will, ist im Grunde Ah, ich werde eine Klasse in jeden von ihnen setzen. Und weil jeder von ihnen ein Bild des Hintergrunds bekommen muss. Also werde ich hier reinlegen. Zum Beispiel, Deve ein Deve zu und tief drei. Also das sind die Klassen, die ich rd bin und jetzt hier drin, ich kann tatsächlich mein Give one anvisieren. Ich werde das Koma setzen, damit ich sie alle gleichzeitig anvisieren kann. Also Deve zu und dann tief drei. Ok. Und ich will, dass sie eine Höhe von 500 Schlägen haben. ALS. Ich möchte 100% abweben. Ok. Und du wirst jetzt sehen, warum? Ich werde diese 100% setzen und ich werde einen Hintergrunddarm von ah setzen, sagen wir, Ratten, okay? Und ich werde mein Brett dort eine Grenze von einem großen setzen. Also Solids blockieren, und ich werde den Rand unten von 10 Pixeln setzen. Das sind also alle Diebe. werden sie haben. Hören Sie, ich habe die eine Woche von 100% eingerichtet, weil all diese Dips, sie sind in diesem leichten Showcontainer. Ok. Und diesen Diashow-Container werde ich hier reinlegen. Schau, Diashow, Bash-Container. Ich werde sagen, dass ich eine Marge Null haben will, die alle auf der Seite zentriert werden soll, und ich werde eine Markierung mit 1200 Pixeln setzen, und ich werde nur auf den Text ziehen. Die Linie drinnen. Toby, alle Zentren. Okay, Lance, aktualisieren , das. Und schauen Sie, wir haben unsere erste Karussellrutsche hier drin, die zweite und die dritte. Okay, also ist das offensichtlich immer noch nicht vollständig gestylt, wie wir wollen, aber wir kommen da rein. Nein, weil wir, ähm hier drin. Schau, die Diebe sind völlig leer, aber wir gaben ihnen Höhe, okay? Und die mit diesen wäre 100% Rabatt auf die Eltern. Und das Elternteil sagt, dass es ein Maximum mit 1200 Pixeln hat. Wie Sie sehen können,sind dies 1200 Pixel. Wie Sie sehen können, Okay, also haben wir das hier. Nun, lasst uns einfach, wie jedes einzelne der Diebe Ziel und geben ihnen einen Hintergrund. Ok. Eso werde ich zum Beispiel hier reinlegen . Mein Deve wird ein Hintergrundbild von dir haben und hier drinnen werde ich die URL setzen . Lassen Sie uns hier sehen. Schau, wir schreiben diese Bucht hier auf den Index Punkt html. Wir müssen reingehen. Nein, eigentlich, tut mir leid. Wir schreiben diese in das CSS in den Hauptpunkt-CSS. Das ist das Richtige. Okay, wir schreiben uns hier auf, und dann gehen wir hoch, und dann müssen wir Zehenbilder machen, und dann wählen wir das Bild aus, das wir wollen. Also lass uns wieder hier reingehen. Also müssen wir eine Ebene nach oben gehen, weil wir innerhalb des CSS für sie sind. Wir müssen eins hoch gehen, und dann müssen wir in die gefalteten Bilder gehen. Und dann mal sehen, welche Art von Bild ich den Strand bekam. Okay, also werde ich hier Beach Dot J zahlen. Dies ist die Erweiterung aus dem Bild. Jedes Bild wird anders sein. Schau, dieser sagt in deinem Artikeltyp JPEG, sie könnten GIF sein, oder es könnte PNG sein. Es gibt viele verschiedene Arten von Erweiterungen für Bilder, also habe ich diese hier drin. Ich lass uns auch sehen, wie sieht er übrigens aus? Okay, ich werde mich auffrischen und schauen, aber das Bild sieht im Moment nicht so toll aus. Hören Sie, was ich hier tun werde, ist, dass ich dort Hintergrundgröße setzen werde, also Hintergrundgröße Toby bedeckt. Dies ist also, um sicherzustellen, dass wird das Beste aus dem Bild zu zeigen, so viel wie wir können. Und ich möchte das Bild auch auf diese Feiern hier konzentrieren, die wir haben. Ich werde hier zurück, ähm, ähm, Hintergrundlage, Hintergrundlage setzen. Und ich wollte auf der Mitte des X sein, wie, horizontal und Mitte vertikal. Lassen Sie uns auffrischen und schauen. Jetzt ist dieses Bild komplett zentriert, wie horizontal und vertikal, und wir können das gleiche jetzt für die anderen beiden tun. Okay, also lasst uns diese kopieren, wenn die Booties hier drin sind und jetzt auch die Dif. Wenn du dich erinnerst, gab es eine, die abgehängt wurde. Gelacht bis in den Sonnenuntergang, und das war Sonnenuntergang. Und schauen Sie, wir wiederholen den gleichen Code für eine Liebe sie. Also, was wir im Osten tun können, weil alle unsere Diebe hier drin die Klasse meiner Schieberegler haben. Wir können diese tatsächlich setzen, sind Wir können sogar in diesem hier setzen. Hier ausgewählt. Wir können die hier rausschneiden, und wir könnten sie hier reinlegen. Schau Und jetzt können wir unseren Code etwas kürzen. Und Abgeordnete schauen so lasst uns sehen. Wie sieht er im Moment aus? Lassen Sie uns auffrischen. Das ist in Ordnung. Das ist in Ordnung. Da ist etwas drin. Sie sind okay. Das sind die drei. Okay, lassen Sie uns erfrischen. Und das ist in Ordnung. Also haben wir alle unsere drei Niederlagen, die wir in den Schieberegler verwandeln werden, wie ich sagte. Eso. Ja, im Grunde, das war's. Das haben wir jetzt für die Gründung unseres Karussellschiebers. Und im nächsten Video werde ich anfangen, etwas JavaScript hinzuzufügen, damit wir hier eine Art Interaktivität haben können , also ja, ich werde das nächste sehen. 3. JavaScript verbinden: Na gut, Leute, willkommen zurück. Und in diesen wirklich werden wir anfangen, etwas JavaScript in unser Projekt hinzuzufügen. Also das erste, was wir tun müssen, ist hier zu unserem Indexpunkt HTML zu gehen und lasst uns zuerst , warum erstellt eine neue Datei, die Haupt genannt wird? Lassen Sie uns einen neuen gefalteten neuen Ordner erstellen. Nennen wir es J. S, weil er über JavaScript sein wird. Gehen wir rein. Input main dot Js Dies ist der Name unserer Einreichung hier, und ich werde hier tun und Konsole nicht Krieg. Wenn Sie nicht wissen, dass ein Konsul nicht Lock ist nur für uns die besten Dinge in JavaScript wird unser Projekt in keiner Weise beeinflussen. Aber es wird Ihnen nur einige Informationen geben, wenn unser Code gut funktioniert oder nicht. Also werde ich hier reinlegen, ähm, Akte. Er arbeitet, wenn die Akte funktioniert. Also werde ich in Ihrem Finale mit den Safeties arbeiten. Und jetzt müssen wir Zehe hier auf dem Skript hinzufügen und ich werde an die Quelle legen, die er Js sein wird , die gefaltet, die wir gerade erstellt haben , und dann Hauptpunkt J s. , Aktualisieren Sie die Seite. Und jetzt sollten wir die Entwicklertools öffnen, die wir nicht kontrolliert haben. Entschuldigung. Richtig. Klicken Sie auf der Basis auf Inspect, oder drücken Sie F 12. Hören Sie, Sie haben die Entwickler-Tools hier auf der rechten Seite. Wenn Sie auf Konsole klicken, werde ich die Größe dieser ein wenig erhöhen, damit Sie sehen können, dass eine bessere Datei funktioniert. Also haben wir diese Nachricht bekommen, nach der wir gesucht haben. Okay, jetzt können wir wieder hier reingehen. Ich werde tatsächlich die Größe des Textes hier in erhöhen, damit ihr Jungs besser sehen könnt andere, wenn das zu viel ist, aber ich denke, wahrscheinlich sollte in Ordnung sein. Ihr könntet gut sehen, also haben wir das hier erledigt. Ich werde zuerstdie Funktion erstellen, zuerst die sich verstecken wird oder all diese Tiefen verbergen wird . Ok. All diese Schieberegler. Das ist das Erste, was ich tun werde. Also werde ich mit den Nachteilen beginnen, die verursacht Show-Dias werden gleich einer engen Funktion . Okay, so deklarieren Sie die enge Funktion hier. Dies ist wie von der Syntax des letzten Jahres sechs. Und ich füge nur diese Zehe konstante Show-Dias hinzu, weil es nichts anderes zurückgeben wird, wird die ganze Zeit dasselbe tun. Also, was ich jetzt tun werde, ist im Grunde wählen. Ich gehe. Ich werde Elise Elemente hier auswählen. Ich war wie, dieser hier. Dieser und dieser mit den Dokumenten dot Holen Sie Elemente meinen Klassennamen in die Klasse. Nennen Sie A. Liebt sie. Sie haben meine Dias. Okay, also werde ich meine Folien machen. Hören Sie, ich muss hier keinen Punkt von vorher reinlegen, also werde ich diese auswählen und ich bin das, was ich nennen werde. Diese nennt man diese. Ah, Klone Dias. Ok. Okay, also ist jetzt drinnen. Also werden Folien gedacht, um all diese zu bekommen. Also, wenn ich eine Konsole, beide Protokoll von Folien. Okay, lass uns das machen. Lassen Sie uns die Seite aktualisieren. Äh, okay. Etwas, das er nicht arbeitet. Jasmine o. J. J. S okay, denn das ist innerhalb unserer Funktion. Damit eine Funktion ausgeführt wird, müssen wir sie aufrufen. Ok. Wir müssen Funktion sagen. Fangen Sie an zu laufen. Um dies zu tun, setzen wir einfach den Namen der Funktion und wir setzen die Klammern, und jetzt sollten alle diese innerhalb laufen. Okay, schauen Sie, jetzt bekommen wir die HTML-Sammlung, die im Grunde alle Elemente erfasst. Wie wir sagten, Schau, das ist die 1. 1 Hoffnung, dass dies die 1. 1 ist, die Sie sehen, ist ein Highlight, dass dies die 3. 1 ist und das ist das, was. Dies ist das 3. 1 Jahr, also 1. 2. 3. haben wir alle bekommen. Also okay, das ist jetzt wie ein Array. Und für mich, Zehe Zugang zu jedem einzelnen von ihnen einzeln. Ich muss so etwas wie eine Vier machen. Schau, ich werde es tun, damit ich gleich Null bin. Ich fange mit meinem Gegenwert an. Ich werde sagen, dass mein ich er wird eine letzte weniger als eine Länge sein. Uh, Dias haben keine Länge. So die Folien Punktlänge ist die Anzahl der Elemente, die wir haben. Wir haben gerade gesehen, dass diese drei, aber wir können ein Konsulatprotokoll machen, nur um sicherzustellen, dass das richtig ist. Dann mache ich I Plus Plus, das ist nur um sicherzustellen, dass wir eins nach dem anderen iterieren. Okay, also werde ich hier drinnen tun, nur für dich, um zu sehen, dass ein Mais diesen Holzstamm verkauft hat, und ich werde über diese hineinlegen. Die Zahl aus Folien nach Osten Setzen Sie den Raum. Ich werde das Kommen hierher bringen und jetzt werde ich Dias machen. Ich werde die kopieren. Leichte Startlänge. Das sind alles Entwickler. Sie brennen bereits die ganze Zeit, um sicherzustellen, dass wir die richtigen Werte erhalten, die ich aktualisieren werde . Schau, die Anzahl der Folien Ost drei. Okay, das machen wir hier drin. Wir würden Scott Länge schieben, weil dieser, wie ich schon sagte, er alle diese Elemente 123 im Osten packt, indem er sie in eine HTML-Sammlung einfügt . Das wird wie ein Array sein. Deshalb können wir sie durchlaufen und wir können die Länge bekommen. Jetzt machen wir diese vier Schleifen hier, Zeh. Es ist jeder, den wir essen werden. Die Rate wird eine Anzeige von keiner auf sie setzen. Okay, ich bin mal sehen, was wir hier drinnen machen können. Ich werde hier so etwas tun. Ich mache meine Folien, okay? Und meine Folien werden gleich zwei sein. Ich okay, Folien, die ich beim ersten Mal, dass dies läuft, beginnt bei Null. Es wird also Folien Null sein, und dann werden wir Punkt-Stil-Punkt-Anzeige in Ordnung bringen, gleich keiner. Und offensichtlich, vor allem, das Lassen ich gleich 2 zu 0 im ersten Lauf, nachdem wir hier drin haben, poste ich. Plus, das bedeutet, dass, wenn er mit Null beginnt, nachdem geht Zehe ein hier und nach geht zu und sieht zwei ist weniger als drei hier drin. Es wird aufhören. OK, wird auf Lee von Null bis zwei beginnen. Und das sind die Zahlen des Arrays. Wenn Sie hier verstehen, wie ein Array, die ersten Elemente sein, Nehmen wir an , dass ich so etwas habe. Als würde ich nur etwas setzen. Wie ich schon sagte, ihr solltet das schon wissen, Bob, genau wie es schnell erklärt, lasst ihn. Dieses erste Element des Arrays ist die Position Null die 2. 1 Position getragen, und die 3. 1 ist die Position, die ich hier setzen werde, ist so etwas wie diese Null eins zwei okay, und das ist, was hier passiert. Das erste Mal beginnt mit Null. Also im Grunde, packt diese erste Niederlage nach dieser Kälte läuft, das ist eine Vier-Schleife. Also geht es immer noch zum nächsten hier drin, also wird es eins sein. Also, danach wird man sich bis zur 2. 1 verstecken und dann hier die Zehe zu gehen, aber dann wird er nachsehen, okay? Er ist zu weniger als drei, denn das ist die Länge ist wahr. Ja, aber wenn du nochmal nachrennst, wird er hier drin sein. Diese drei sind weniger als drei. Nein. Also bricht es zusammen. In Ordnung. Also hoffentlich könnt ihr diese Party hier verstehen. Eso Yeah, lassen Sie uns die Zehe zurücklegen, die ich und ich erfrischen werden, und wie Sie sehen können , sind sie alle jetzt weg. Aber was ich jetzt hier drinnen machen möchte, ist eigentlich etwas wie diese Folien machen zu wollen. Und dann werde ich zum Beispiel setzen, die 1. 1 die Null, und ich werde Stil Dr. Display of Lord setzen . Okay, wenn ich aktualisiere, Schau jetzt, nur der 1. 1 leicht zu erklärende Block. Ich könnte zum Beispiel die 2. 1 hier drinnen setzen . Schau jetzt, nur die 2. 1 Was? Ich konnte die dritte nicht setzen. Okay, nur das hier ist. Aber das ist nicht das, was wir sagen wollen. Willst du diese dynamisch setzen. Und wie wir das tun, ist, dass wir die Variable hier oben erstellen, und wir werden diese Variable aufrufen, wie die indizierte Folienindexfolie gleich eins sein wird oder ursprünglich gleich ist. Okay, um zu sagen, wie zum Beispiel, Lasst uns hier wieder reingehen, dass diese Position eins ist. Diese Position ist durch diese. Push it Volition ist drei. Richtig? Okay, also haben wir das hier drin. Also, was ich tun werde, ist, in welcher Position wir im Moment nicht sichtbar sind, ich werde sagen, dass der Dia-Index im Moment eins ist. Und ich werde das hier auf den Folienindex minus eins setzen. Er wird gleich dem Anzeigeblock sein. Also, zum Beispiel, schauen Sie hier rein. Anfangs, der Dia-Index, er ist einer. Also, wenn wir hier reingehen, wird das ein Bergmann sein. Einer wird Null sein. Die 1. 1 das erste Ah-Element, das angezeigt werden soll, wird dieses sein. Wie Sie sehen können, ist eine Mine eins. Und schauen wir uns die Bilder an. Ähm, wie ist es, wie ist es, Index für diesen Ort? Das sollte also gut sein. Also, lass uns gehen und erfrischen. Alles klar, lasst uns das auffrischen. Und wie wir sehen können, ist das in Ordnung. Das ist also die 1. 1 von den Dieben, die angezeigt wird. Aber jetzt könnten wir hier reinkommen. Sehen Sie, die Folie der Show, wenn wir sie anrufen, könnten wir tatsächlich den Wert setzen, den wir wollen. Also werde ich hier reinlegen, als ich die angefangen habe, kann ich sagen, als wäre ich korrespondent mit der Nummer des Folienindex, den ich will. Und ich könnte hier reingehen, im Grunde, und hier drin, in und hier drin. Ich werde den Dia-Index setzen. Ok. Das erste das erste Mal, ist das erste Mal,dass ich das bin. Das ist das erste Mal, dass ich die anrufe. Ich werde sagen, dass diese Folie, der Index hier rein geht, und wir werden den Zeh hier vorbeiziehen, und das wird hier vorbeigehen. Okay, lassen Sie uns erfrischen. Das ist jetzt alles in Ordnung. Okay, was? Was können wir dagegen auch tun? Wir haben das hier spielen. Jetzt können wir tatsächlich anfangen, unsere Pfeile hier, auf der linken und auf der rechten Seite zu setzen , so dass wir tatsächlich eine Art von Funktion anhängen können, damit wir zum nächsten Schieberegler gehen können. Also machen wir das im nächsten Video, also behalte ich diese Videos nicht zu lange, und das war's, Leute, Leute, wenn ihr irgendwelche Fragen habt, wie ich gesagt habe, legt sie einfach unten und ich sehe in das nächste Video. 4. Slider: Na gut, Leute, willkommen zurück. Und jetzt werden wir unsere entstanden erstellen, damit wir im Grunde auf sie klicken können, um zur nächsten Folie zu gehen . Also, was ich hier tun werde, ist, dass ich nach all meinem Difc werde ich ein Ankerelement mit einer Klasse der vorherigen erstellen , Zum Beispiel werde ich hier vorerst reinlegen. Diese Hashtag nur vorübergehend. , Ich glaube nicht,dass wir die im Moment noch nicht mal brauchen. Ich denke, wir brauchen nur diese Klasse, und ich werde hier noch einen mit den Krallen der nächsten setzen. Ok? Und im Moment, wenn ich mich erfrischen, wirst du nichts sehen, weil das leer ist. Aber ich werde hier einen Code für den Pfeil von links und den Code für den Pfeil von rechts einfügen. Okay, wenn du nicht weißt, was ich mache, was ich hier mache, kannst du einfach zu Google gehen. Und wenn Sie etwas wie HTML-Code HTML-Code-Symbole setzen , so etwas wie diese, das wie viele Orte aussehen wird wie diese aussehen wird. Sie können alle diese Symbole Copyright, Euro-Texter sehen. Es gibt so viele, viele Dinge, die Sie tun können. Schau, du hast sogar diese Art von Wolken, Sohn, die du mit irgendeiner Art HTML-Codes setzen kannst. Ah, aber ja, das ist der Anruf, den ich hier für den Pfeil links und rechts benutze. Also mal sehen. Wie sieht er aus? Schau, wir sind hier reingekommen. Einer links, und wir kamen noch von einem. Sofort. Gehen wir zu unseren Hauptdocks. ES sagt, lasst uns anfangen, diese zu stylen und ich werde tun, ist, dass ich meine vorherige in meinem nächsten IRO will. Ok? Ich werde sie haben einen Cursor des Zeigers. Also, wenn ich mit meinem Mund drüben bin, wird er sich wie eine Hand drehen. Hör zu, äh, atme als Nächstes, okay? Weil sie noch leer sind. Das ist das Problem. Okay, wir werden die in einer Sekunde reparieren, und OK, das ist so. Wir werden das hier setzen. Ich möchte eine absolute Position haben. Und wenn ich diese als absolute Position setze, was ist das? Ich brauche meine Diashow Container Toe haben eine Position von relativ, weil wir die Dinge relativ zu den Eltern bewegen werden. Ok. Wenn du die steckst, will ich, dass sie ein Geflecht haben, damit sie alles haben können, was wir haben. Und ich möchte einen Top-off von 50% haben. Also wird es in der Mitte vertikal E sein. Wie Sie jetzt sehen können, möchte ich sie ein bisschen mehr an die Spitze stellen, denn wenn Sie sie wie am wenigsten setzen, gehen sie ein bisschen zu unten. Also werde ich die Margenhoffnung absetzen. Vielleicht Minderjährige. Um, Beispiel 22 Pixel zum Beispiel 22 Pixel. Minus 22 Pixel. Und ich will, dass sie einen Kühler von Weiß haben. Es ist Erfrischung. Sieh mal, sie stehlen hier. Sie können jetzt mit einem Cursor sehen. Hören Sie, es funktioniert jetzt. Äh, was soll ich sonst noch den Abschied zwischen ihnen setzen, um unten links und rechts von 16 Pixeln zu trennen . Lassen Sie uns auffrischen. Du kannst jetzt nicht wirklich gut sehen, weil ich sie immer noch auf die nächste Seite stellen muss. Ich möchte, dass sie eine Form haben, die Bullen abschwächt. - Toby. Etwas mutiger. Ich möchte, dass sie eine Telefongröße von, sagen wir, 18 Pixel haben. Mal sehen, wie sieht er aus? Ja, ich muss sie immer noch zur Seite stellen. Also, was ich jetzt tun werde, ist, dass ich mir das hier schnappen werde. Meine kurzen Jahre. Ich werde es auf die linke Seite legen. Null. Okay, also sollte der vorherige jetzt hier nach links reingehen. Schau, und das Recht ist immer noch da drin. Also, was ich dagegen tun werde, ist, dass ich mir meine rechte schnappen werde. Ich werde mein Recht ergreifen, und ich werde es nicht richtig machen. Entschuldigung. Als Nächstes. Ich hole meine nächste, und ich werde die Fahrt machen. Null-Aktualisierung. Hören Sie, es ist hier im Augenblick und OK, also was kann ich dagegen tun? Ich will jetzt, dass sie alle Ah haben, lassen Sie mich sehen. Ah, ich will, dass sie einen Tee trinken. Vielleicht möchte ich sie wie eine Art Hintergrundanrufer setzen. Ich möchte ihnen eine Art Hintergrundfarbe geben. Ich denke, es wäre gut. Also, ja, ja, lasst uns sie hier reinbringen. Ein Hintergrund, Äh, oder 1. 1. Das werde ich zuerst hier drinnen machen. Ich werde meine vorherige und meine nächste, die ich will, wenn wir über sie. Ok. Wenn wir über sie mit einer Maus. Also einer vorbei. Ich möchte einen Hintergrund Kohler von rgb a haben und das ist RGB wird einfach wie für Alfa sein . Okay, das wird also etwas Undurchsichtigkeit sein. Wenn ich 00 Null setze, wird das der schwarze Code für den RGB A und dann ist der letzte Wert die Deckkraft. Wenn Sie einen setzen, wird völlig undurchsichtig sein, wenn Sie 0,8 setzen, wird fast undurchsichtig sein. Aber schauen Sie, mit etwas Transparenz können Sie immer noch sehen, wie der Hintergrund schlägt. Ordnung, also haben wir das jetzt abgedeckt, aber wir waren nie mit der Maus vorbei. Der Übergang ist zu schnell. Also, was ich hier drin tun werde, ist, dass ich noch reingehe. Ich werde den Übergang setzen, und ich werde den Übergang für die Hintergrundfarbe für die Hintergrundfarbe anvisieren. Und ich will in 0,6 Sekunden passieren und mit ist in out. Okay, sieh mal. Sieh mal, wie schön. Okay, wir haben das hier abgedeckt. Nun, um, okay, wir können vielleicht auch einen Rand oben setzen. Ah, ich weiß es nicht. Ich weiß es nicht. Uh, mal sehen, vielleicht, was ich sagen kann. Ich habe das schon. Ich möchte auch die Textdekoration ablegen. Keiner. Okay, denn in der Regel, wie sind verankerte Elemente? Sie haben etwas unter der unendlichen Linie. Und das will ich nicht. Das sollte vorerst in Ordnung sein. Hören Sie, das ist in Ordnung hier drin, und aber ich möchte ihnen eine Art Grenze geben, Grenzradius. Also werde ich hier auf meine vorherige Grenze setzen, die den Radius abbohrt. Nehmen wir an, Null Pixel oben, Drei Pixel auf der rechten Seite, Drei Pixel unten, links und auf. Die obere linke Seite wird Null sein. Okay, also wird das gestoppt. Rechts oben Botham, obere linke Zehe. Ach, unten links oben. Er ist wie im Uhrzeigersinn. Also oben rechts unten rechts unten links oben links? Ja, so wie das. Und das hier drin, ich werde die Grenzheizkörper abstellen. Ich könnte für seine etwa drei Pixel hier und dann 003 Pixel setzen. Es ist Erfrischung. Mal sehen. Ja, jetzt ist ein bisschen wieein Grenzradius, also ist er nicht wie ganz scharf an den Rändern. Okay, also haben wir das hier jetzt, alles Stil hier drin. Wir müssen diese Punkte, die wir hier haben,mit unseren Funktionen verbinden, die wir hier drin haben. Wir müssen diese Punkte, die wir hier haben,mit unseren Funktionen verbinden , Also werde ich das im nächsten Video machen, also sehe ich dich dort. 5. Slider mit JavaScript verbinden: Na gut, Leute, willkommen zurück. Und jetzt werden wir unsere Pfeile, die wir gerade vorher mit unserer JavaScript-Datei verbinden , damit wir tatsächlich zu den nächsten Folien gehen können. Also zuerst, was ich tun möchte, ist eine Funktion hier namens const zu erstellen. Plus Slide ist, zum Beispiel, plus Folie ist und es wird gleich Toe Pfeil-Funktion sein. Okay, endet hier drin. Ich werde es wie ein Parameter hier und zum Beispiel übergeben, und was wir tun werden, ist, dass wir unsere Funktion nennen, die wir hier von vorher erstellt haben . Und wir werden hier sagen, dass das Argument hier drin, was auch immer wir hier vorbeigehen, dem leichten Index gleich sein wird. Was auch immer wir im Moment haben, und dieses wird gleich sein, was wir im Moment haben. Lasst uns hier rein. Wir haben die Hälse eines schieben. Das wird also eins sein plus die Nummer, die wir hier eingeben, okay? Und was auch immer wir hier drin haben, das ist eine. Also das ist eins plus eins. Okay, also werde ich hier reinbringen, okay? Also, wenn wir jetzt hier reingehen, müssen wir die hier jetzt anhängen, also werde ich hier auf Klick setzen. Also, wenn wir auf diese klicken Nein, nicht diese. Ich will das tun. Das Plus zuerst. Okay, also werde ich auf Click tun. Dies ist Teil des HTML. Das ist nichts Neues. Also beim Klicken möchte ich diese Funktion hier plus Folien ausführen, und möchte ich diese Funktion hier plus Folien ausführen, und wenn ich diese Funktionen ausführen möchte,möchte ich die Nummer eins übergeben. wenn ich diese Funktionen ausführen möchte, Okay, Also schauen Sie auf Klick plus Folien eins. Wenn wir also hier drin wären, plus Dias, wird dies durch eine ersetzt. Also zeigen Dias Dysfunktion hier drin wird mit einem Dia-Index laufen. Ich werde tatsächlich Ihren kleinen Index eintragen. Also sind wir all das auf der gleichen Seite. Mein Folienindex wird gleich dem Folienindex sein. Was immer wir im Moment in einer Reihe oben haben. Plus, in diesem Ende, hier drin ist der eins. Also sieh mal, leichter Index wird eins sein und N wird eins sein. Das wird also eins sein und eins wird auch sein. In Ordnung, so zu, und diese Funktion wird laufen. Also das sind wir bereits abgedeckt und wird nur die Folien plus Dia-Index anzeigen, die von hier aus ist. Okay, also für meins ist eins. Okay, also wird die Position des Arrays jetzt 01 sein Okay, also wird das jetzt eins sein, was also die Position Null ist. Das ist Position eins. Also wird es diese anzeigen, und natürlich, und natürlich, wenn Sie bitte weiter klicken, lassen Sie uns aktualisieren und sehen. Hoppla. Ähm, ist etwas drin. Ich muss die retten. Mal sehen. Lassen Sie uns diese unerwarteten Token online speichern 16. Okay, mal sehen, was hier drin los ist. In Ordnung? Ok. können wir sehen. Ich habe vergessen, hier meinen Pfeil für die IRA-Funktion zu setzen. Okay, lassen Sie uns erfrischen. Und jetzt sieh mal, das ist in Ordnung. Lasst uns hier einklicken. Schau, jetzt gehen wir zum 2. 1 Wir werden nochmals klicken, wird zur 3. 1 gehen und wenn ich nochmal klicke, schaut nach unten, okay? Weil wir aus dem Geltungsbereich kommen. Also, was wir hier drinnen tun können, im Grunde für diese Art von Situation ist, dass ich hier eine if-Aussage, die es sagen wird , mein Ende. Welches hier drin ist, dass wir die ganze Zeit passieren werden. Er wird mehr sein als die Dias Gedankenlänge oder oder drei, wenn du willst. Ich will, dass mein Folienindex gleich eins sein wird. Also gehe ich zurück, ich werde hier sogar ein Konsolen-Punktprotokoll einlegen, damit ihr sehen könnt, was los ist. Ähm, ich werde die loswerden. Was für ein Putting bekommen Rat. Beide, Herr, meine Rutschen. Volle Position Stück Okay, ich werde das Komma setzen. Wir setzen die gemeinsame, und ich werde hier reinlegen, die Position der Folien wird, ähm, wird diese sein. Okay, Slide-Index, Bergarbeiter eins drei frisch. Schau, meine Schiebeposition am Anfang, wenn wir anfangen, ist Null. Weil dies die Array-Position ist. Wenn ich wieder auf meine Folienposition klicke, ist er eins. Und wieder, meine Schiebeposition, ist er auch. Also ist er der Letzte. Ok. Null für die 1. 1 im Array. 1. 1 für die zweite und die zweite für die dritte. Nun, wenn ich es nochmal versuche. Sieh mal, es geht zurück auf die 1. 1, also ist es, als würde es zurückgesetzt. Also haben wir das hier. Jetzt müssen wir nur dasselbe für den Zurück-Button tun. Also für den Zurück-Button muss ich nur das On Click hier erstellen und den Bergleuten eine setzen, und er wird genauso arbeiten. Aber sieh mal, ich kann nach vorne gehen. Ich kann nach hinten gehen. Aber jetzt, sieh mal, wenn er wie Bergleute als einer geht, wird es kaputt machen. Also müssen wir eine andere Bedingung hier reinbringen. Und diese Bedingung wird sein, wenn mein Ende weniger als eins sein wird. Ok. Ich möchte, dass mein Folienindex auf meinen Folienindex sowohl Länge als auch drei sein wird, wenn Sie wollen. Also sollte das, ähm, verhindern, dass unsere Website bricht. In Ordnung, also schau, lass mich das auffrischen. Okay, mal sehen. Hier drin ist etwas, das mir für Gott in Ordnung ist. Das ist, wie, nicht Folie, Index, aber meine Folien, Das war der Fehler. Lasst uns das auffrischen. Jetzt gehen wir nach vorne. Lassen Sie uns nach hinten gehen und schauen Sie die ganze Zeit zurücksetzen, damit es jetzt kein Problem mit diesem gibt . Okay, also schätze ich, das war's für dieses Video. Jetzt können wir unsere Punkte hier reinlegen und einfach anklicken und überprüfen, was auch immer, auch immer, egal, was auch immer aktuell ist. Also sind wir im Moment, also werde ich das im nächsten Video machen. 6. Slider Dots hinzufügen: Alles klar, Leute, willkommen zurück. Lasst uns jetzt unsere Punkte hier einbauen, damit wir durch die Karussellrutschen klicken können. Gehen wir also zurück im Jahr zu Visual Studio-Code. Und im Jahr auf dem Boden, ich bin wirklich erstellt die mit der Klasse der Gedanken Mais sagen okay. Und drinnen werde ich die Spannweite mit einer Klasse von Punkten erstellen, und ich brauche drei davon. Ok? Im Moment, wenn Sie versuchen, sich zu erfrischen, werden Sie nichts sehen, Ordnung, weil sie leer sind. Also lasst uns zu unserem Hauptpunkt C gehen und was ich tun möchte, zunächst, ist zunächst,dass ich meinen Gedanken erschaffen werde. Und das will ich, wann immer ich über sie hoffe. Ich habe mit meiner Mauser mit meinem Mund ernannt. Entschuldigung. Ich möchte, dass sie eine Höhe von 15 Pixeln haben. A. Wir haben 15 große Seelen. Ich möchte, dass sie je 02 Pixel abgrenzen. Okay, das ist also, dass sie etwas Raum zwischen ihnen haben. Ich will sie haben. Ich möchte, dass sie einen Doppelpunkt im Hintergrund haben. Oh, raue BBB. Also das gibt, wie, eine Art gräuliche Farbe. Ich möchte, dass sie einen Grenzradius von 50% haben. Das ist nur so, dass sie aussehen wie, Äh , ja , Bruder, wir können sie noch nicht sehen. Wir können sie noch nicht sehen, weil Schwämme vor dem hinzugefügten in der Zeile angezeigt. Also müssen wir ihnen eine Anzeige von Inline-Blockierung geben. Zunächst einmal, so können wir tatsächlich alle diese Stile setzen. Es ist erfrischt. Sieh sie dir hier an. Sie ich jetzt möchte ich, dass sie auch einen Rand vom oberen Rand des Thorpe aus 20 Pixel haben. Mal sehen. Hier sind sie. - Ja. Und jetzt, wann immer ich sie mit meinem Mund überdrübe, also werde ich hier einen Gedanken machen. Überlegt. Ich will, dass sie einen Hintergrund haben. Kohler runter 7171 leicht, bitte. Ein bisschen ah, Beat von Ah, ja, dunklerer Grau. Aber das geht zu schnell. Also werde ich hier einen Übergang einbringen, okay? Und ein Übergang, der sich auf meine Hintergruppe auswirken wird. Kohler, 0,6 Sekunden und wird nur erfrischen. Sieht jetzt viel besser aus. Okay, also will ich ihnen Aziz setzen. Nun, eine Art Klasse von Aktiv, Art Klasse von Aktiv, ähm, dass, wenn sie aktiv sind, sie diese Art von Hintergrund haben werden. Also werde ich hier aktiv reinstellen. Er wird diese Art von Hintergrund-Coladas haben. Nun, also haben wir das jetzt aus dem Weg. Also im Grunde, es ist erfrischend. Hören Sie, und das ist in Ordnung. Das war's also. Sie sind jetzt gestylt. Und im nächsten Video werden wir sie tatsächlich mit unserer JavaScript-Datei verbinden, damit wir sie durchklicken und zur nächsten Folie gehen können . Und genau wie das, was wir hier mit unseren Pfeilen haben, so werde ich im nächsten Video sehen. 7. JavaScript zu Slider Dots verbinden: Alles klar, Leute, willkommen zurück. Also lasst uns hier den Zeh oder die Visuals zu deiner Ziege in unseren Hauptpunkt Js gehen... und lass mich diesen Rat loswerden, ist wie ein paar Sachen hier reinzubringen, die wir nicht mehr brauchen . Ich werde hier ein konstantes Ziel schaffen, unsere Gedanken erlauben, und ich werde sie Gedanken nennen, und das wird einem Dokument gleich sein. Ich habe Elemente meines Klassennamens in der Klasse e Punkt bekommen Wenn ihr euch erinnert, schaut von hier, all diese drei. Und jetzt wird das mir eine HTML-Sammlung geben, die Sie wie in der Vergewaltigung behandeln, so dass wir bei vier loping hier tun können, um durch alle von ihnen zu suchen. Und wir werden dasselbe tun, genau wie hier oben. Also lass ich gleich 20 Ok, ich weniger als, ähm Daut. Daut-Länge. Okay, Dots don 't Length wird sein, ich Lust Schläge. Okay, wir werden sie alle durchschauen. Und was wir tun werden, ist, wenn meine Gedanken, ich diejenige, die wir in dem Moment betrachten Gedanken Klasse am wenigsten nicht Mais enthält die Klasse des aktiven ist dies sicherzustellen, dass diese Elemente, die wir im Moment betrachten enthält die Klasse der aktiven. Ich möchte diese Gedanken auswählen. Ok. Und ich möchte eine Punkt-Klassen-Leasing tun dachte, entfernen Sie die Klasse der aktiven. Wenn sie eine Klasse von aktiven haben, werden wir die Klasse der aktiven entfernen. Das ist es, was wir tun werden. Ich bin eine Kollaborative, dieser Rat, dieses Protokoll. Und jetzt hier drinnen werde ich meine Gedanken machen. Etwas hat hier drinnen schon mal. Dia-Index abzüglich eines Gottes. Das ist genau wie, was auch immer wir gerade sind, ich werde den Klassennamen anwenden. Also die Klasse Leasing. Aber ich kann sagen, Klassennamen, so dass ihr verschiedene Klassennamen sehen könnt, wird gleich sein. Also plus, ich könnte Glas setzen, am wenigsten Glas, am wenigsten die Chancen, und ich werde das Glas der aktiven. Ok. Ah, lasst uns auffrischen und mal sehen. Hör zu, jetzt habe ich hier eine Klasse von Punkten und die Klasse der aktiven sowie ich gehe zum nächsten . Hören Sie, , dieser hier drin ist die Klasse des aktiven und dieses Nein, und dasselbe hier drin. Nun, wenn Sie versuchen, in einer dieser klicken wird noch nicht ausgeführt. Was wir jetzt tun können, damit es funktioniert, ist einfach eine andere Funktion hier zu erstellen. Nennen wir es „const“. Aktuelle leichte aktuelle Folie, und das wird gleich toe eine schmale Funktion sein. Okay, ich werde in dem Jahr vorbei, und du kannst alles setzen, was du willst. Das ist wie eine Flamme, und ich werde genau das Gleiche tun, wie wir hier drin haben. Aber dieses Mal, anstatt diesen leichten Index zu setzen, wird inkrementell sein, weil wir nicht inkrementieren wollen . Wir wollen genau dorthin gehen, wo wir wollen. Okay, also müssen wir jetzt hier reingehen. Und auf all diesen Spannweiten müssen Sie nur diesen einen Klick setzen. Er wird gleich der Funktion sein, die wir ausführen wollen. Und diese Funktion wird aktuelle Folie für die 1. 1 Wir werden Ströme Leben eins setzen . Hoppla. Lasst uns diese richtigen aktuellen Folie eins für die 2. 1 setzen. Wir werden Ströme Leben auch setzen. Und für die 3. 1 werden wir die aktuelle Folie drei setzen. Es ist aktualisieren und mal sehen Bom bom bom und hier ist es einfacher, vollständig zu arbeiten. Ordnung. Hören Sie, jetzt sind wir wie, im Grunde am Ende, Leute. Nun, das Letzte, was ich nur tun will, ist nur eine Art Effekt, wenn wir durch die nächsten gehen nur Zeh, um es zu dieser Art von Schnickschnack zu machen, wie die Leute sagen, um es ein bisschen mehr zu machen Schön, das Projekt. Das Projekt ist also im Grunde, dass , wie ich schon sagte , wir gehen einfach für das letzte Video, wo wir eine Art schönen Übergang zwischen der Folie machen werden. So auch im nächsten Video 8. Css Übergänge: Alles klar, Leute. Willkommen zurück. Also, jetzt werden wir diese Art von Übergängen zwischen unseren Schiebereglern hinzufügen, wenn wir klicken. Also zuerst, gehen wir hier rein in unser Visual Studio Kohle tar Index dot html und lasst uns auf die Klasse des Fade. Okay, diese Klasse, du kannst angeben, welchen Namen du willst, du gibst ihm nur diesen, Glauben, denn das wird eine Art Verblasseffekt sein. Wie ich schon sagte, du kannst den Namen verwenden, den du willst. Ich werde jetzt auf den Hauptpunkt CSS hören. Und ich werde jetzt diese Glaubensklasse anvisieren, die wir gerade in ihnen geschaffen haben. Jetzt werden wir hier drin etwas von den CSS-Animationen namens Animation, Animation machen. Name des Bindebogens. Und wie heißt unsere Animation hier drin? Das liegt ganz bei Ihnen. Sie können den Namen angeben, den Sie wollen. Die Animation, die ich will, wird Schicksal genannt. Okay, diese Namen, sie könnten anders sein. Ok, sie sind völlig von dir überlassen. Also werde ich das Fade setzen, und das ist der Name der Animation und die Animationsdauer wird 1,5 Sekunden betragen . Okay, das ist der Name. Aber schauen Sie, Sie müssen vorsichtig sein, weil diese Art von Animation, manchmal sind sie nicht kompatibel mit Moves Ära oder mit Firefox Order mit Safari. Also müssen Sie diese Art von Web-Kinder setzen. Okay, also wo „Name behalten“ werde ich es zum Beispiel verblasst . Und jetzt werde ich wo Kinder und Dauer und 1,5 Sekunden. Stellen Sie immer sicher, dass Sie Ihre waren Kinder zuerst und zuletzt die normalen ohne das Web-Kit setzen. Okay, jetzt werden wir diese Animation Fade anvisieren, die wir hier erstellt haben. Also, wenn Sie im Jahr, zum Beispiel, verblassen einen oder meinen Glauben für Izabal mein Schicksal jetzt hier drin, müssten Sie in Schlepptau gehen. Schlüsselphrase. Ok. Und du wirstzum Beispiel meine Verblassensetzen zum Beispiel meine Verblassen . Und das ist die Animation, von der wir machen werden, aus der ich machen werde. Hier beginnt also die Animation von der Opazität der Passivität Off 0.4. Ok. Bis zu zwei. Jetzt werde ich die Kapazität von einem hier reinlegen. Ich werde das sagen. Ich werde mich erfrischen und mal sehen, verstehst du. Sieh dir die an. Nette Innovation. Und im Grunde, das war's. Leute, das ist das Einzige, was uns vermisst wurde, diese Art von Animation. So sieht jetzt ein wenig besser aus mit dieser Art von Übergang verblasst von einem zum anderen. Und ich hoffe, ihr habt Spaß an diesem Projekt. So können Sie tatsächlich Ihre Fähigkeiten mit JavaScript und genau wie Fortschritt schmecken. Und wenn du denkst, wenn du das erste Mal, als du den Kurs durchgegangen bist, ein wenig verwirrt wurdest, geh es einfach nochmal durch. Das ist es, was ich empfohlen habe. Gehen Sie nicht nur einmal durch, gehen Sie es noch einmal durch und versuchen Sie es selbst zu tun, nicht nur , kopieren,was ich tue. Das ist der beste Weg, den du lernen wirst. Und wenn Sie irgendwelche Fragen wie gewohnt haben, um mir eine E-Mail zu schicken oder sie einfach hier unten in den Kommentaren und ich werde mich bei Ihnen melden . Das war's also für die Projekt-Jungs. Ich hoffe, Sie genießen es und wir sehen uns in der nächsten