Inhaltsverzeichnis
Wir werden einen Slider erstellen, der mit entwickelt wurde
Jquery Ja
Nivo-Schieber, ohne dass ein Plugin erforderlich ist und wir uns an unsere Website anpassen können.
Dazu verwenden wir die
Jquery-Framework, die ein
Bibliothek, um die Arbeit mit der Javascript-Sprache zu erleichtern. Wir laden die Bibliothek herunter von
jquery.com, es ist auch möglich, dass Sie es durch Ziehen verwenden können
googleapis.com Verwenden Sie diesen Code in Ihrer HTML-Seite, um dieses Skript hinzuzufügen.
Wenn Sie es von der Jquery-Seite heruntergeladen und in ein Verzeichnis auf Ihrer Website hochgeladen haben, müssen Sie es wie im folgenden Beispiel auf Ihre Domain verweisen:
Jetzt laden wir herunter
Nivo-Schieberegler was ist der
Jquery-Bibliothek, mit der wir den Schieberegler erstellen können. Von hier aus können Sie Nivo Slider kostenlos herunterladen. Entpacken Sie die Datei in unserem Verzeichnis, hier sehen wir die Struktur des Webs.
Jetzt erstellen wir eine index.html-Datei für unsere Website, in deren Kopfzeile wir die Bibliotheken und Stylesheets einfügen. Wir können die Jquery-Bibliothek, die Nivo-Slider-Bibliothek und die eigenen Stylesheets von Nivo-Slider sehen und dann anpassen.
Jetzt erstellen wir einen Container für unsere Bilder und für den Slider, dafür und um ihn anzeigen zu können, wurde er innerhalb der gleichen index.html erstellt (Er kann auch in einer CSS-Stylesheet-Datei erstellt werden, je nach Bedarf Jeder).
Wir beginnen mit der Struktur des Webs und dem Slider selbst, fügen die anzuzeigenden Bilder und eine Nachricht ein.
Dann aktivieren wir das nivo Silder Plugin und senden ihm Parameter über die Art des Effekts, Zeit zwischen Animation, Pause zwischen Bild und vieles mehr, die in der Nivo Slider Dokumentation zu sehen sind.
Beobachten wir, dass die ID aktiviert ist
#silder derselbe, in dem ich die Bilder definiere. Wenn ich also mehr als einen Schieberegler haben möchte, muss ich dieselbe Struktur replizieren und für die entsprechende ID aktivieren.
Das Ergebnis des Tests von index.html in einem Browser ist:
Hier sehen wir die zweite Folie, unten sehen wir die Anzahl der Folien 1 und 2, und die Standardlinks Zurück (Zurück) Weiter (Nächste) Wir werden die Ansicht mit CSS verbessern.
Wir können die Zahlen in Aufzählungszeichen ändern, indem wir einfach nivo-silder.css ansehen
.nivo-controlNav {text-align: left; Polsterung: 0; Position: relativ; z-Index: 10; } .nivo-controlNav zu {display: inline-block; Breite: 10px; Höhe: 10px; Hintergrund: URL (bullets.png.webp) keine Wiederholung; Texteinzug: -9999px; Rand: 0; Rand: 0 2px; } .nivo-controlNav a.active {Hintergrundposition: 0 100%; } .nivo-directionNav zu {display: block; Breite: 30px; Höhe: 30px; Hintergrund: URL (arrows.png.webp) keine Wiederholung; Texteinzug: -9999px; Rand: 0; oben: automatisch; unten: -36px; z-Index: 11; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; Randradius: 2px; } a.nivo-nextNav {Hintergrundposition: 160% 50%; rechts: 0px; } a.nivo-prevNav {Hintergrundposition: -60% 50%; links: automatisch; rechts: 35px; } Das Ergebnis dieser Änderung sind die Zahlen als Aufzählungszeichen links und die Links als Pfeile rechts.
Wir werden die Funktionalität erweitern, indem wir einen Datenblock in einer der Folien anzeigen
Wenn wir den Code ändern, den wir bereits haben, ändern wir den Absatz in Folie 2 für einen Block, den ich mit einer ID # block2 aufrufe, dann erstelle ich den Block und wende einen versteckten Stil an, damit er nur sichtbar ist, wenn Folie 2 aktiviert ist.
Das Ergebnis ist wie folgt:
Sie können auch Miniaturansichten einfügen. Eine andere Möglichkeit besteht darin, den Inhalt dynamisch aus einem MySQL und PHP zu generieren oder ihn in einem CMS-Template wie Joomla oder WordPress zu verwenden. Es kommt mit vielen bereits programmierten Plugins, aber mit ein paar Zeilen Code können wir unsere eigene Komponente erstellen. Ich hoffe, es hat Ihnen gedient.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
