Was brauchen wir?
zu. Obwohl wir für die Arbeit mit .html-Dateien keinen lokalen Server benötigen, empfehle ich, einen zu installieren, um alle unsere Dateien in einem Verzeichnis zu organisieren und bequemer arbeiten zu können, wenn wir später PHP-Code hinzufügen möchten, in diesem Fall ich Xampp Server verwenden wird, können Sie von https herunterladen: //www.apachefr… g / es / index.html
B. Da wir eine Folie erstellen werden, benötigen wir die Bilder, die wir darauf platzieren werden, sie müssen alle genau die gleiche Größe in Pixeln haben, ich werde einige mit einer Größe von 1200 x 600 verwenden.
C. Ein Code-Editor Ihrer Wahl, in diesem Fall verwende ich einen namens "Klammern".
Lass uns anfangen …
1. Da wir Xampp installiert haben, gehen wir in das Verzeichnis "C: / xampp / htdocs" und wir erstellen einen neuen Ordner, in diesem Fall nenne ich ihn "SliderShow_main", darin erstelle ich einen weiteren Ordner und nenne ihn "Bilder", dort platziere ich die Bilder, die ich in der Diashow verwenden werde.
Klicken Sie auf das Bild, um es zu vergrößern
2. Jetzt öffnen wir unseren Code-Editor, wir gehen ins Menü "Datei > Neu".
Klicken Sie auf das Bild, um es zu vergrößern
Und in diese neue Datei werden wir den Code schreiben Basis-HTML.
Klicken Sie auf das Bild, um es zu vergrößern
Wir speichern diese Datei mit der Erweiterung (.html) in dem Ordner, den wir in Schritt 1 erstellt haben "SliderShow_main".3. Später werden wir einen Titel für die Datei und die Verweise auf die Bootstrap- und jquery-Dateien hinzufügen, die wir benötigen, damit unser Slider richtig funktioniert. Wir haben zwei Möglichkeiten, diese Dateien herunterzuladen und in Ordnern auf unserer Site auf dem lokalen Server zu speichern oder wir können sie aus dem Web hinzufügen, was uns Platz auf unserem Server sparen würde. Ich werde die zweite Option wählen, Sie werden im nächsten Bild sehen, wie es geht …
Klicken Sie auf das Bild, um es zu vergrößern
4. Später werden wir innerhalb der beiden hinzufügendenen wir die Klassen "container" bzw. "col-md-12" wie folgt zuordnen werden …
VERGRÖSSERN
Klicken Sie auf das Bild, um es zu vergrößern
Diese zweidie wir hinzufügen, dient dazu, dass unser Slider vor allem den verfügbaren Platz auf unserem Bildschirm anzeigt.5. Nachdem wir unseren Code vorbereitet haben, werden wir beginnen, die Elemente hinzuzufügen, aus denen die Folie besteht. Mal sehen …
Klicken Sie auf das Bild, um es zu vergrößern
Wie ihr sehen könnt, haben wir ein neues hinzugefügtdie wir "carousel_1" nennen und 2 Bootstrap-Klassen namens "carousel" und "slide" zuweisen. Beachten Sie, dass beide durch ein Leerzeichen getrennt sind, zusätzlich muss das Attribut hinzugefügt werden, damit die Folie funktioniert (data-ride = "Karussell").6. In der vorherigen Ebene fügen wir eine geordnete Liste mit der Klasse "Karussell-Indikatoren" hinzu, die uns hilft, die Anzahl der Indikatoren entsprechend unseren Bildern hinzuzufügen. In diesem Fall verwenden wir drei Bilder, sodass wir drei Indikatoren haben, beginnend mit dem "0".
Klicken Sie auf das Bild, um es zu vergrößern
Notiere dass der7. Jetzt fügen wir die Elemente mit den angezeigten Bildern hinzu. Sehen wir uns den Code an, in dem Sie weitere Details finden …
VERGRÖSSERN
Klicken Sie auf das Bild, um es zu vergrößern
Nachdem wir alles geschrieben haben, was mit dem ersten Artikel verbunden ist, kopieren und fügen wir ihn einfach entsprechend der benötigten Artikelmenge ein, wobei wir berücksichtigen, dass wir den Pfad des Bildes ändern müssen und dass die anderen Artikel nicht die "aktive" Klasse enthalten dürfen .
VERGRÖSSERN
Klicken Sie auf das Bild, um es zu vergrößern
Wie Sie sehen, haben wir bereits die 3 Elemente mit unseren 3 Bildern hinzugefügt und unser Code ist funktionsfähig, aber jetzt werden wir Kontrollelemente (Prev & Next) hinzufügen, um zwischen unseren Bildern hin und her zu wechseln, und wir werden auch einige Symbole hinzufügen. Wir hinterlassen unseren endgültigen Code wie folgt …
VERGRÖSSERN
Klicken Sie auf das Bild, um es zu vergrößern
Wenn wir die Schritte richtig befolgen, können wir in unserem Browser die folgenden Ergebnisse sehen …
VERGRÖSSERN
Klicken Sie auf das Bild, um es zu vergrößern
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
Hat Ihnen dieses Tutorial geholfen?
Wenn nichtHILFE, DIESES TUTORIAL ZU VERBESSERN!
Glauben Sie, dass Sie dieses Tutorial korrigieren oder verbessern können? Sie können Ihre Edition mit den Änderungen senden, die Sie für sinnvoll erachten.0 Benutzer haben dieses Tutorial bearbeitet. Bearbeiten Sie und werden Sie ein anerkannter Experte!
Bearbeiten Sie dieses Tutorial
ÄHNLICHE TUTORIALS
Eigenschaften und Attribute von HTML5-FormularenHTML5 und CSS3: Beziehungs- und CSS3-AttributeErste Schritte mit HTML5 und CSS3: Gemeinsame Elemente im WebdesignRezeptvorlage mit HTML5 und CSS3HTML5 und CSS3: Erste SchritteTwitter-Karte für Benutzer erstellen, die HTML5 und CSS3 verwendenHorizontaler Balken mit Hover-Effekt in HTML5, CSS3 und BootstrapAbrufen von Kundenkoordinaten mit Google Maps API in JavaScript (HMTL5, CSS3 und Bootstrap)
18 Kommentare
Juan Carlos
25.08.2015 11:08
Um Ihnen keinen positiven Punkt zu geben. Tolles Tutorial, wirst du mehr Ronny machen ???
danke für deine Anleitung.
- Prüfbericht
Nestor1
25.08.2015 11:34
Das Tutorial hat mir auch sehr gut gefallen, danke Ronny, nur eine Frage: Hast du eine ZIP-Datei, um das Beispiel des Codes zu nehmen? Es wäre toll, wenn Sie Lust dazu haben. Danke!!
- Prüfbericht
Alexander Teba
25.08.2015 16:26
Tolle Wirkung. Ich analysiere es.
Ich schließe mich dem an, was die anderen sagen, wenn Sie eine Datei mit dem Code zum Testen hätten, wäre es großartig.
Danke
- Prüfbericht
Ronny Bonillo
25.08.2015 16:54
Guten Morgen Freunde, danke für die Unterstützung, es ist toll, dass es euch gefallen hat, denn dies ist eines meiner ersten 3 Tutorials auf der Seite und ich habe wirklich nicht so schnell positive Antworten erwartet, bezüglich deiner Frage Juan Carlos werde ich natürlich. hier für eine Weile jede Woche neue Tutorials posten Ich hoffe, dass sie euch gefallen und dass ihr mich mit euren Kommentaren und Bewertungen unterstützt … Grüße aus Venezuela …
- Prüfbericht
Ronny Bonillo
25.08.2015 16:58
Willkommen, Nestor1, danke für deinen Kommentar! Bezüglich Ihrer Frage empfehle ich Ihnen, bald wiederzukommen, da in den nächsten Stunden der Inhalt dieses Tutorials aktualisiert wird, indem am Ende eine ZIP-Datei hinzugefügt wird, damit Sie den Code herunterladen können.
- Prüfbericht
Eneko
25.08.2015 17:06
Willkommen, Nestor1, danke für deinen Kommentar! Bezüglich Ihrer Frage empfehle ich Ihnen, bald wiederzukommen, da in den nächsten Stunden der Inhalt dieses Tutorials aktualisiert wird, indem am Ende eine ZIP-Datei hinzugefügt wird, damit Sie den Code herunterladen können.
Ich werde auch aufmerksam sein, die Wirkung ist spektakulär und erstaunlich. vielen Dank im Voraus.
- Prüfbericht
Ronny Bonillo
25.08.2015 17:07
Gern geschehen, Eneko …
- Prüfbericht
Alexander Teba
25.08.2015 17:13
Guten Morgen Freunde, danke für die Unterstützung, es ist toll, dass es euch gefallen hat, denn dies ist eines meiner ersten 3 Tutorials auf der Seite und ich habe wirklich nicht so schnell positive Antworten erwartet, bezüglich deiner Frage Juan Carlos werde ich natürlich. hier für eine Weile jede Woche neue Tutorials posten Ich hoffe, dass sie euch gefallen und dass ihr mich mit euren Kommentaren und Bewertungen unterstützt … Grüße aus Venezuela …
Wie schnell !!
Danke Ronny, du weißt nicht, wie gut es für mich ist, dass du den Code geteilt hast.
Vielen Dank Entwickler!
ps: ich folge dir.
- Prüfbericht
Ronny Bonillo
25.08.2015 17:19
willkommen alejandro, danke für deine unterstützung!
- Prüfbericht
Nestor1
25.08.2015 17:25
Willkommen, Nestor1, danke für deinen Kommentar! Bezüglich Ihrer Frage empfehle ich Ihnen, bald wiederzukommen, da in den nächsten Stunden der Inhalt dieses Tutorials aktualisiert wird, indem am Ende eine ZIP-Datei hinzugefügt wird, damit Sie den Code herunterladen können.
Vielen Dank für das Anhängen der Ronny-Datei. Und willkommen bei Solvetic.
- Prüfbericht
Carlos Sanz
02.09.2015 16:14
Ich teste es, danke, dass du Ronny angehängt hast.
- Prüfbericht
Ronny Bonillo
02.09.2015 21:43
Willkommen, Carlos
- Prüfbericht
Fiore nella
08.09.2015 16:25
Danke für den Anhang!! sehr cool.
- Prüfbericht
Ronny Bonillo
08.09.2015 16:37
Herzlich willkommen Fiore 
- Prüfbericht
Reneé Toapanta García
02.06.2016 21:58
Guten Morgen, das Theme ist sehr elegant, aber ich kann es nicht herunterladen, es fordert mich immer wieder auf, mich zu identifizieren und lässt mich von dort nicht mehr los. Wenn Sie mir helfen könnten, danke ich Ihnen eine Million.
- Prüfbericht
Julio Martinez
Jul 262021-2022 20:03
Ich sehe die ZIP-Datei nicht, um den Code zu sehen
- Prüfbericht
aldo1982
Jul 292021-2022 05:22
sehr gut, aber ich sehe die .zip-Datei nicht, um den Codego herunterzuladen.
Slds
- Prüfbericht
Manelly
Sep 132021-2022 12:58
Gut…
Super Erklärung und Präsentation Ronny Wie die letzten Kommentatoren… Wo ist der Link zum Herunterladen des Codes?
Danke und Grüße,
Nelly.
- Prüfbericht
- Benutzerkonto erstellenMelden Sie sich KOSTENLOS an, um Ihr Solvetic-Konto zu habenEinen Account registrieren
- IdentifizierenHaben Sie bereits ein Konto? Hier anmeldenIdentifizieren Sie mich in meinem Konto
