Viele Leute auf ihrer eigenen Website möchten Schieberegler sehen - das sind Blöcke, die ein Inh altselement auf dem Bildschirm anzeigen und nach einer bestimmten Zeit diesen Inh alt in einen anderen ändern. Natürlich ist jeder Webentwickler in der Lage, eigenständig einen Slider mit HTML, CSS und JavaScript zu erstellen, aber das ist nicht immer sinnvoll. Sie werden ziemlich viel Zeit aufwenden, obwohl es im Internet einige fertige Lösungen gibt, die Ihnen das Leben viel einfacher machen und Ihre Website viel attraktiver machen. Dieser Artikel konzentriert sich auf eine dieser Lösungen namens Owl Carousel. Das Einrichten dieses Schiebereglers ist unglaublich einfach, sodass selbst ein Anfänger damit umgehen kann. Jetzt erfahren Sie, was dieser Schieberegler ist, sowie andere wichtige Details. Das Einrichten des Eulenkarussells ist ein schrittweiser Prozess, daher sollten Sie dieses Material nur der Reihe nach studieren.
Was ist das und warum sollten Sie gerade diesen Slider wählen?
Eulenkarussell, dessen Konfiguration in diesem Artikel besprochen wird, ist ein sehr effektives Plugin, das Ihrer Seite einen schönen und praktischen Schieberegler hinzufügt, der Ihre Arbeit auf der Website erheblich erleichtert.spart viel Zeit, Mühe und Geld. Was sind die Vorteile dieses speziellen Plugins, da es im Web ziemlich viele Schieberegler gibt? Tatsache ist, dass dieser Schieberegler Ihnen Dutzende von Anpassungsoptionen bietet, mit denen Sie Ihre Seite einzigartig und unnachahmlich machen können. Es ist ein reaktionsschnelles Plugin, das auf allen Browserversionen funktioniert und einfach mit WordPress und anderen gängigen CMS verbunden werden kann. Im Allgemeinen hat dieser Schieberegler viele Vorteile, daher sollten Sie sich auf jeden Fall zu seinen Gunsten entscheiden. Bevor Sie jedoch mit der Einrichtung von Owl Carousel beginnen, muss dieses Plugin noch geladen werden.
Herunterladen
Das Einrichten von Owl Carousel 2 ist nicht möglich, wenn Sie es nicht auf Ihren Computer heruntergeladen haben, und da dies eine Schritt-für-Schritt-Anleitung ist, sollten Sie ganz von vorne beginnen. Das Programm kann also mit Paketmanagern heruntergeladen werden, aber dies sind fortgeschrittene Entwicklertools, also werden wir Ihnen hier sagen, wie Sie dieses Plugin auf die übliche Weise erh alten. Sie müssen auf die offizielle Website des Plugins gehen und die neueste Version herunterladen. Danach müssen alle heruntergeladenen Dateien in das Verzeichnis Ihrer Website übertragen werden, nachdem Sie einen praktischen Ordner vorbereitet haben, der den gleichen Namen wie das Plugin selbst hat. Beachten Sie, dass dieses Plugin mit jQuery gebündelt ist, also müssen Sie diese Bibliothek ebenfalls verfügbar haben. Nun, sobald Sie dieses Plugin heruntergeladen haben, müssen Sie sich um den nächsten Schritt kümmern, nämlich das Einrichten des Eulenkarussell-Schiebereglers 2.
CSS
BDie Einstellungen von Owl Carousel 1.3 bleiben fast die gleichen wie in der neueren Version 2, es werden nur neue Funktionen hinzugefügt. Die grundlegenden Informationen sind jedoch die gleichen, beginnend mit dem Hinzufügen von CSS zu Ihrem Dokument. Der erste Schritt besteht also darin, die Zeile hinzuzufügen. Was gibt sie dir? Dies ist eine Zeichenfolge, die die erforderlichen Stile auf die Website lädt, um den Schieberegler anzuzeigen. Hier können Sie abschließen, indem Sie die visuelle Verarbeitung selbst durchführen. Es gibt jedoch eine bequemere und schnellere Lösung. Sie können auch eine Zeile hinzufügen, die auch das Standardthema des Schiebereglers lädt, sodass es sofort einsatzbereit ist. Sie können einige der Stile bearbeiten, um Ihren Schieberegler einzigartiger und anders und besser für Ihre Inh alte geeignet zu machen. Natürlich wären die Eulenkarussell-Einstellungen auf Russisch sehr praktisch, aber jeder, der Websites erstellt, sollte verstehen, dass er auf Englischkenntnisse nicht verzichten kann.
JavaSpript-Verbindung
Natürlich funktioniert der Slider nicht ohne JS, also solltest du auch darauf achten, die passende Datei mit dem nötigen Code einzubinden. Dazu müssen Sie eine Codezeile aus der Dokumentation einfügen, allerdings muss eine Bedingung erfüllt sein. Jeder weiß, dass JS eine Programmiersprache ist, die alle Befehle der Reihe nach ausführt, also sollten Sie in diesem Fall diese Codezeile nach der Zeile hinzufügen, die Ihrem Dokument die jQuery-Bibliothek hinzufügt. Mehr mit JS haben Sie bei diesem Slider nichts zu tunbrauchen.
HTML-Codierung
Nun, Sie haben den Schieberegler verbunden, jetzt ist es an der Zeit, ihn zu entwerfen und anzupassen. Zunächst müssen Sie den HTML-Code schreiben, damit der Slider überhaupt auf Ihrer Seite erscheint. Dazu müssen Sie einen Container erstellen, der die Folien enthält. Dies kann mit dem div-Tag erfolgen, dem die Eulenkarussell-Klasse zugewiesen werden muss. Diese Klasse stellt sicher, dass alle mit dem Schieberegler verbundenen Stile aktiviert werden. Sie können auch eine andere Klasse schreiben - Eulenthema. Es ist praktisch, wenn Sie sich entscheiden, das Standarddesign zu verwenden oder die Standardversion des Schiebereglers als Grundlage für die weitere Arbeit zu nehmen.
Dann müssen Sie jede Folie in einem separaten Container mit einem div-Tag hinzufügen. Natürlich können Sie auch andere Tags verwenden, aber dieses Tag eignet sich am besten für Slider.
Plugin aufrufen
Und das Letzte, was Sie tun müssen, um einen fertigen Slider auf Ihrer Website zu haben, ist die Verwendung dieses Codeblocks:
$(document).ready(function(){
$(".eulenkarussell").owlCarousel();
});
Es stellt sicher, dass der Schieberegler zu funktionieren beginnt, d.h. durch den Inh alt scrollt, wenn Ihre Seite geladen wird. Mit demselben Code können Sie Owl Carousel mit WordPress verbinden. Die Einstellungen dieses Plugins sind zahlreich und vielfältig, und jetzt lernen Sie die wichtigsten Punkte kennen.
Aussehen und Funktionalität des Schiebereglers festlegen
Also, mit welchen Befehlen können Sie Ihren Slider anpassen? Zuallererst müssen Sie sich den Befehl items merken, denn damit können Sie eine bestimmte Anzahl von Folien in Ihrem Slider einstellen. Mit dem Schleifenbefehl können Sie wählen, ob Sie den Schieberegler wiederholen oder das Scrollen beim letzten Element stoppen möchten. Es gibt auch den Drag-Befehl, der mehrere Optionen hat, wie z. B. Maus und Berührung. Im ersten Fall können Sie dafür sorgen, dass die Elemente Ihres Sliders mit gedrückter Maus gewischt werden können, im zweiten Fall mit Hilfe einer Berührung (dieser Befehl ist für mobile Geräte geeignet). Ein weiterer wichtiger Befehl ist nav, der die Anzeige von Navigationspfeilen ermöglicht. Zusammen mit ihm können Sie den Befehl navText verwenden, um Beschriftungen zu Navigationssch altflächen hinzuzufügen. Außerdem sollten Sie den Autoplay-Befehl nicht vergessen, mit dem Sie den automatischen Beginn des Drehens der Folien Ihres Schiebereglers beim Laden der Seite aktivieren und deaktivieren können. Mit diesem Befehl können Sie auch autoplayTimeout verwenden, für das Sie einen bestimmten Wert in Millisekunden festlegen können, der die Zeit zwischen dem automatischen Umblättern der einzelnen Dias bestimmt.
Wenn Sie Responsive Webdesign verwenden, das heißt, das Design Ihrer Seite ändert sich automatisch, je nachdem, auf welchem Gerät sie angezeigt wird, dann müssen Sie sich unbedingt den Responsive-Befehl merken, mit dem Sie die Anzahl der Folien festlegen können abhängig von der Breite des Bildschirms, auf dem die Seite angezeigt wird, anzuzeigen.
