Viele Leute auf ihrer eigenen Website wollen sehenSchieberegler sind solche Blöcke, die ein Element des Inhalts auf dem Bildschirm anzeigen, und nach einer gewissen Zeit ändern sie diesen Inhalt in einen anderen. Natürlich kann jeder Webentwickler selbst einen Slider mit HTML, CSS und JavaScript erstellen, aber das macht nicht immer Sinn. Sie werden ziemlich viel Zeit damit verbringen, obwohl es im Internet einige vorgefertigte Lösungen gibt, die Ihr Leben erheblich erleichtern und Ihre Website attraktiver machen. In diesem Artikel werden wir eine dieser Lösungen, genannt Owl Carousel, diskutieren. Das Einrichten dieses Sliders ist unglaublich einfach, so dass auch Anfänger damit zurechtkommen. Jetzt erfahren Sie, was dieser Schieberegler darstellt, sowie weitere wichtige Details. Das Einrichten des Eulenkarussells erfolgt Schritt für Schritt, also sollten Sie dieses Material nur in der Reihenfolge studieren.
Was ist es und warum lohnt es sich, diesen Schieberegler zu wählen?
Eulenkarussell, dessen Einstellung sein wirdin diesem Artikel betrachtet, ist ein sehr effektives Plug-in, das Ihrer Seite einen schönen und praktischen Schieberegler hinzufügt, der Ihre Arbeit auf der Website wesentlich erleichtert, wodurch Sie viel Zeit, Mühe und Geld sparen können. Was sind die Vorteile dieses speziellen Plug-Ins, weil es viele Schieberegler im Web gibt? Tatsache ist, dass dieser Slider Ihnen mehrere Dutzend Optionen für die Anpassung bietet, mit denen Sie Ihre Seite einzigartig und unwiederholbar machen können. Dies ist ein adaptives Plugin, das auf allen Versionen von Browsern funktioniert und einfach mit WordPress und anderen gängigen CMS verbunden werden kann. Im Allgemeinen sind die Vorteile dieses Sliders sehr groß, also sollten Sie definitiv eine Entscheidung zu seinen Gunsten treffen. Bevor Sie jedoch mit dem Einrichten von Owl Carousel beginnen, muss dieses Plug-in heruntergeladen werden.
Herunterladen
Das Einrichten von Owl Carousel 2 ist nicht möglich, wenn Sie dies nicht tunlade es auf deinen Computer herunter, und da es sich um eine Schritt-für-Schritt-Anleitung handelt, lohnt es sich, von Anfang an zu beginnen. So kann das Programm mit Hilfe von Paketmanagern heruntergeladen werden, aber diese sind fortgeschrittene Entwicklerwerkzeuge, daher wird hier erklärt, wie man dieses Plugin auf die übliche Weise erhält. Sie müssen auf die offizielle Seite des Plugins gehen und die neueste Version herunterladen. Danach sollten alle heruntergeladenen Dateien in das Verzeichnis Ihrer Site übertragen werden und ein geeigneter Ordner erstellt werden, der genauso wie das Plugin selbst aufgerufen wird. Beachten Sie, dass dieses Plugin mit jQuery verknüpft ist. Sie müssen diese Bibliothek also ebenfalls verfügbar haben. Nun, wenn Sie dieses Plug-In herunterladen, müssen Sie den nächsten Schritt machen, nämlich die Schiebereglereinstellung von Owl Carousel 2.
CSS
In Eulenkarussell 1.3 Einstellungen bleiben fast gleich wie in der neueren zweiten Version, nur neue Funktionen werden hinzugefügt. Die grundlegenden Informationen sind jedoch gleich, beginnend mit dem Hinzufügen von CSS zu Ihrem Dokument. Der erste Schritt besteht darin, dem HTML-Code eine Zeile hinzuzufügen . Was gibt sie dir?Dies ist eine Zeichenfolge, mit der die erforderlichen Stile zur Anzeige des Schiebereglers auf die Site hochgeladen werden. An diesem Punkt können Sie mit der visuellen Verarbeitung fertig werden. Es gibt jedoch eine bequemere und schnellere Lösung. Sie können auch eine Zeile hinzufügen. was auch das Standardthema lädtSchieberegler, wodurch es sofort einsatzbereit ist. Sie können einige Stile bearbeiten, um Ihren Slider einzigartig und ungewöhnlich zu gestalten und für Ihren Inhalt besser geeignet zu sein. Natürlich sind die Einstellungen von Owl Carousel auf Russisch sehr bequem, aber jeder, der Websites erstellt, sollte verstehen, dass er ohne Englischkenntnisse nicht auskommt.
JavaScript-Verbindung
Natürlich funktioniert der Slider nicht ohne JS,Daher müssen Sie auch die entsprechende Datei mit dem erforderlichen Code angeben. Dazu müssen Sie eine Codezeile einfügen aus der Dokumentation jedoch mit der obligatorischen Einhaltung einer Bedingung.Jeder weiß, dass JS eine Programmiersprache ist, die alle Befehle der Reihe nach ausführt. In diesem Fall sollten Sie diese Codezeile nach der Zeile hinzufügen, die die jQuery-Bibliothek Ihrem Dokument hinzufügt. Bei diesem Schieberegler brauchen Sie nichts weiter mit JS zu tun.
HTML-Code-Layout
Nun, Sie haben den Schieberegler angeschlossen, jetzt ist es Zeitum es auszugeben und zu konfigurieren. Zunächst müssen Sie HTML-Code schreiben, damit der Schieberegler auf Ihrer Seite angezeigt wird. Dazu müssen Sie einen Container erstellen, der Folien enthält. Dies kann mit dem div-Tag erfolgen, dem die Eulenkarussellklasse zugewiesen werden muss. Diese Klasse stellt sicher, dass alle zum Schieberegler gehörenden Stile aktiviert werden. Sie können auch eine andere Klasse registrieren - Eulenthema. Dies ist hilfreich, wenn Sie das Standarddesign verwenden oder die Standardversion des Schiebereglers als Grundlage für weitere Arbeiten verwenden.
Anschließend 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 Schieberegler.
Plugin-Aufruf
Nun, das Letzte, was Sie tun müssen, um einen vorgefertigten Schieberegler auf Ihrer Site anzuzeigen, ist die Verwendung dieses Codeblocks:
$ (Dokument) .ready (Funktion () {
$ (". Eulenkarussell"). owlCarousel ();
});
Es stellt sicher, dass der Schieberegler startetFunktion, dh scrollen Sie durch den Inhalt, 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.
Festlegen des Erscheinungsbilds und der Funktionalität des Schiebereglers
Also, welche Befehle können Sie verwenden,um deinen Slider anzupassen? Zunächst müssen Sie sich den Befehl items merken, da Sie damit eine bestimmte Anzahl von Folien in Ihrem Schieberegler festlegen können. Mit dem Befehl loop können Sie auswählen, ob Sie den Schieberegler schleifen oder das Scrollen des letzten Elements beenden möchten. Es gibt auch den Befehl Ziehen, der verschiedene Optionen bietet, z. B. Maus und Berühren. Im ersten Fall können Sie festlegen, dass die Elemente Ihres Schiebereglers mit der geklemmten Maus umgedreht werden können, und im zweiten Fall durch Berühren (dieser Befehl ist für mobile Geräte geeignet). Ein weiterer wichtiger Befehl ist nav, mit dem Navigationspfeile angezeigt werden können. Zusammen damit können Sie den Befehl navText verwenden und den Navigationsschaltflächen Beschriftungen hinzufügen. Sie sollten auch den Autoplay-Befehl nicht vergessen, mit dem Sie den automatischen Start des Umdrehens der Folien Ihres Schiebereglers beim Laden der Seite ein- und ausschalten können. Zusammen 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 Scrollen durch die einzelnen Folien bestimmt.
Wenn Sie responsives Webdesign verwenden, dannWenn sich das Design Ihrer Seite automatisch ändert, je nachdem, auf welchem Gerät sie angezeigt wird, müssen Sie sich unbedingt den Befehl responsive merken, mit dem Sie die Anzahl der angezeigten Folien abhängig von der Breite des Bildschirms festlegen können, auf dem die Seite angezeigt wird.
