<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> <pre class="brush:php;toolbar:false"> <code> <div class="Slider"> <br> <h2> Folie eins </h2> <br> <h2> Folie zwei </h2> <br> <h2> 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>

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> 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.