So bauen Sie einen einfachen JQuery Slider

<code> <link href = " https: rel="stylesheet"> Tag des HTML -Dokuments. Wie Sie sehen können, habe ich die erforderlichen Dateien aus der CDN -URL geladen. Wenn Sie diese Dateien für Ihr Projekt heruntergeladen haben, müssen Sie für jede Datei den richtigen Pfad bereitstellen. </p> <h3 id="Setzen-Sie-den-Karussellinhalt"> Setzen Sie den Karussellinhalt </h3> <p> In diesem Abschnitt lernen wir, wie Karussellinhalte in einer HTML -Datei festgelegt werden. </p> <p> Schauen wir uns den folgenden Code -Snippet an. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code> <div class="Slider"> <br> <h2 id="Folie-eins"> Folie eins </h2> <br> <h2 id="Folie-zwei"> Folie zwei </h2> <br> <h2 id="Dut-drei"> Dut drei </h2> Karussell wird initialisiert. Es ist zu beachten, dass im obigen Code -Snippet die CSS -Klasse im Hauptelement <code> <div> verwendet wird. Derzeit verwenden wir <code> Slider </code> als CSS -Klasse, sodass wir diesen Wert während des Einrichtungsvorgangs von BXSLIDER verwenden. <p> Natürlich können Sie alles verwenden, nicht nur Text. Wir werden im nächsten Abschnitt dazu zurückkehren, wenn wir uns ansehen, wie ein vollständiges Bildkarousel erstellt wird. Jetzt müssen Sie nur noch die CSS -Klasse, die wir im Hauptelement <code> <div> angeben, notieren. <p> Unser Karussell sieht mit RAW -HTML nicht gut aus. Wir werden daher einige zusätzliche CSS hinzufügen, um den Hintergrund, die Schriftgröße und die Textausrichtung des Titels anzugeben. </p> <pre class="brush:php;toolbar:false"> Body {<br> Rand: 20px Auto; <br> Schriftfamilie: 'Lato'; <br> Schriftgewicht: 300; /BR> Hintergrund: Orange; <br> Schriftgröße: 6Rem; <br> Zeilenhöhe: 3; <br> Rand: 0; <br> } <br>

Nach dem Login kopieren

Initialisieren Sie BXSLIDER

Bisher haben wir die erforderlichen Bibliotheksdateien aufgenommen und HTML -Inhalte für unser Karussell einrichten. Das einzige, was noch übrig ist, ist, BXSlider zu initialisieren und unseren statischen HTML-Inhalt in ein wunderschön aussehendes Rotary-Karussell umzuwandeln!

Schauen wir uns den Code -Snippet an, der das Karussell initialisiert.

 <br> $ (document) .ready (function () {<br> $ ('. Slider'). Bxslider (); <br>}); Oder Sie können es direkt über dem Tag <code>  </code> am Ende der HTML -Datei zum Ausführen von JavaScript nach dem Laden der Seite platzieren. Wenn Sie es vorziehen, es in das Tag <code> <script> </script></code> zu setzen, müssen Sie sicherstellen, dass Sie es platzieren, nachdem die erforderlichen JavaScript- und CSS -Dateien geladen wurden.  <p> Wie Sie sehen können, verwenden wir die <code> Slider </code> CSS -Klasse, um unser Karussell zu initialisieren. </p> <p> Durch diese drei einfachen Schritte bauen Sie ein reaktionsschnelles Karussell mit der JQuery-basierten BXSLIDER-Bibliothek! Hier ist eine Codepen-Demonstration, die den tatsächlichen Effekt des Karussells zeigt: </p> <p> <iframe denfulscreen="true" framborder="no"    style="max-width:90%" ladering="Lazy" scrolling="no" src="https%20:/codepen.io.%20=%20"> </iframe> </p> <p> Im nächsten Abschnitt werden wir auf das erweitert, was wir bisher besprochen haben, und wir werden versuchen, das Karussell mit den verschiedenen Konfigurationsoptionen zu erstellen, die von der BXSLIDER -Bibliothek bereitgestellt werden. </p> <h2 id="Erstellen-Sie-im-vorherigen-Abschnitt-ein-praktisches-Beispiel"> Erstellen Sie im vorherigen Abschnitt ein praktisches Beispiel </h2> <p> Wir haben darüber diskutiert, wie ein Basic -Karussell mit der BXSLIDER -Bibliothek eingerichtet wird. In diesem Abschnitt werden wir ein praktisches Beispiel vorstellen, das demonstriert, wie ein rotierendes Bildkarousel für Ihre Website erstellt wird. </p> <p> Erstellen Sie im Stammverzeichnis Ihres Dokuments eine HTML -Datei mit den folgenden Codeausschnitten. </p> <pre class="brush:php;toolbar:false"> <br>  <br>  <br>  <br>  <link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css%20</br>%20<div%20class%20=%20" slider> <br>  <div> <img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355685315.jpg" class="lazy" title="ein wunderschön Landscape" alt="So bauen Sie einen einfachen JQuery Slider" >
</div><br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355685315.jpg" class="lazy" title="Stationery on Table" alt="So bauen Sie einen einfachen JQuery Slider" ></div><br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355874714.jpg" class="lazy" title="A Coffee Mug" alt="So bauen Sie einen einfachen JQuery Slider" ></div><br><br><br> $('.slider').bxSlider({<br> autoControls: true,<br> auto: true,<br> pager: true,<br> slideWidth: 600,<br> mode: 'fade',<br> captions: true,<br> speed: 1000<br> });<br> <br><br><br>

After setting, your slide should look like this:

Der Code sollte im obigen Beispiel vertraut aussehen. Es ist sehr ähnlich zu dem, was wir bereits besprochen haben. Der einzige Unterschied besteht darin, dass wir unser Karussell mit einigen Konfigurationsoptionen initialisieren, die von der BXSLIDER -Bibliothek unterstützt werden. Schauen wir uns diesen Code -Snippet genauer an.

$('.slider').bxSlider({<br> autoControls: true,<br> auto: true,<br> pager: true,<br> slideWidth: 600,<br> mode: 'fade',<br> captions: true,<br> speed: 1000<br>});<br>

autoControls parameter

autoControls parameter adds controls to allow users to start and stop slides. Standardmäßig ist es auf False eingestellt. Wenn Sie also das Steuerelement anzeigen möchten, müssen Sie es explizit auf True setzen.

automatischer Parameter

automatischer Parameter ermöglicht das automatische Start der Folie, wenn die Seite geladen wird. Standardmäßig ist es auf False festgelegt.

Pager Parameter

Pager -Parameter fügt der Folie einen Pager hinzu.

Parameter für die Diasbreite

können Sie die Breite der Folie festlegen. Dieser Parameter ist erforderlich, wenn Sie die horizontale Option für Ihre Diashow verwenden.

Modusparameter

Der Parametermodus ermöglicht es Ihnen, den Übergangstyp zwischen Objektträgern zu konfigurieren. Es gibt drei Optionen, aus denen Sie auswählen können - horizontal, vertikal und verblassen. Im obigen Beispiel haben wir die Option Fade-In-Option verwendet. Wenn Sie also von einer Folie auf einen anderen wechseln, sehen Sie den Fade-In-Effekt.

Untertitel Parameter

Untertitel Parameter wird verwendet, wenn Sie den Titel für jede Folie anzeigen möchten. Der Titel wird aus dem Titelattribut des Bildelements erhalten. Wie Sie sehen können, geben wir Titelattribute für alle Bilder im Beispiel an.

Geschwindigkeitsparameter

Geschwindigkeitsparameter ermöglicht die Konfiguration der Dauer der Dia -Übergangsdauer und in Millisekunden. In unserem Beispiel setzen wir es auf 1000, sodass der Objektträger einmal pro Sekunde gedreht wird.

BXSLIDER hat viele andere Konfigurationsoptionen - Sie können sie in der offiziellen Dokumentation von BXSlider -Optionen kennenlernen. Erkunden Sie weiterhin die verschiedenen Optionen in der BXSLIDER -Bibliothek. Es bietet auch viele benutzerdefinierte Möglichkeiten für die Verwendung von JavaScript -Rückrufmethoden.

Schlussfolgerung

Wir haben heute mithilfe der JQuery -Bibliothek ein grundlegendes Karussell eingerichtet. Zur Demonstration haben wir die BXSLIDER -Bibliothek anhand der Jquery -Bibliothek ausgewählt. Wir haben auch ein praktisches Beispiel erstellt, indem wir die verschiedenen Konfigurationsoptionen der BXSLIDER -Bibliothek verwendet haben.