Erstellen eines Responsive Carousel-Schiebereglers mit Owl.js im Vollbildmodus

In einem früheren Beitrag habe ich Ihnen gezeigt, wie Sie mit slick.js eine benutzerdefinierte Bildergalerie erstellen. Heute beschreibe ich den Prozess der Erstellung eines animierten, reaktionsfähigen Vollbild-Karussell-Schiebereglers mit owl.js (oder „Eulenkarussell“)..

Um eine erste Vorstellung von dem, was wir bauen, zu bekommen, werfen Sie einen Blick auf die zugehörige CodePen-Demo (sehen Sie sich die größere Version für ein besseres Erlebnis an):

Was ist Eulenkarussell??

Owl.js ist ein beliebtes jQuery-Plugin, das von David Deutch erstellt wurde und mit dem Sie attraktive, ansprechende Karussells erstellen können. Sehen Sie sich die Demos an, um besser zu verstehen, was Ihnen dieses Plugin bieten kann.

Zum Glück hat es eine großartige Browserunterstützung, die auf folgenden Geräten getestet wurde:

• Chrom
• Feuerfuchs
• Oper
• IE7 / 8/10/11
• iPad Safari
• iPod4 Safari
• Nexus 7 Chrome
• Galaxy S4
• Nokia 8s Windows8

Für weitere Details sehen Sie sich die Dokumentation an.

Erste Schritte mit Owl.js

Um mit owl zu beginnen, laden Sie zunächst die folgenden Dateien in Ihr Projekt herunter und installieren Sie sie:

• jQuery
• owl.carousel.css oder seine reduzierte Version
  
• owl.carousel.js oder seine reduzierte Version

Optional möchten Sie möglicherweise das importieren owl.theme.default.css Datei.

Sie können eine Kopie der entsprechenden Eulendateien abrufen, indem Sie das Github-Repo besuchen, einen Paketmanager verwenden (z. B. npm) oder die erforderlichen Assets über ein CDN (z. B. cdnjs) laden. Für dieses Tutorial wähle ich die letzte Option.

Für die Zwecke dieses Tutorials habe ich neben den Eulendateien auch Babel und Bootstrap 4 integriert.

In diesem Sinne, wenn Sie unter die schauen die Einstellungen In unserem Demo-Stift sehen Sie, dass ich drei externe CSS-Dateien und zwei externe JavaScript-Dateien enthalten habe.

1. Das HTML

Um loszulegen, definieren wir ein Karussell mit drei Folien. Jede dieser Folien enthält einen Titel, einen Untertitel und eine Aktionsschaltfläche.

Hier ist die erforderliche Struktur für unsere Demoseite:

Zwei Dinge sollten an dieser Stelle erwähnt werden:

1. Der obige Code verwendet Bootstrap 4-Klassen. Das Bootstrap-Framework ist nicht wichtig. Ich habe es nur hinzugefügt, weil ich die CSS-Entwicklung beschleunigen wollte.
2. Ich habe das Hintergrundbild jeder Folie durch Inline-Stile hinzugefügt. Wenn es sich um dynamische Inhalte handelt, ist dies die häufigste CSS-Methode zum Hinzufügen von Hintergrundbildern.

2. Das CSS

Lassen Sie uns mit dem HTML-Code die CSS-Stile betrachten, die wir auf unsere Seite anwenden werden. Der Einfachheit halber behandeln wir nur einen Teil der verfügbaren Stile.

Zunächst definieren wir zwei benutzerdefinierte Eigenschaften und zwei Hilfsklassen:

: Wurzel - Hauptfarbe Weiß: Weiß; - Hauptschwarz-Farbe: Schwarz;  .static Position: statisch;  .cover Hintergrundgröße: Abdeckung; Hintergrundposition: Mitte; Hintergrundwiederholung: keine Wiederholung; 

Als Nächstes geben wir Stile für die Karussellfolien an, einschließlich der Übergänge:

.Eulen-Karussell-Schieber Position: relativ; Höhe: 100 Vh; Hintergrundfarbe: Hellgrau;  .owl-carousel .owl-slide-animated transform: translateX (20px); Deckkraft: 0; Sichtbarkeit: versteckt; Übergang: alle 0,05s;  .owl-carousel .owl-slide-animated.is-umwandelt transform: none; Deckkraft: 1; Sichtbarkeit: sichtbar; Übergang: alle 0,5 s;  .owl-carousel .owl-slide-title.is-übergeht Übergangsverzögerung: 0.2s;  .owl-carousel .owl-slide-subtitle.is-Übergang Übergangsverzögerung: 0,35s;  .owl-carousel .owl-slide-cta. wird umgeschaltet Übergangsverzögerung: 0,5 s; 

Zum Schluss legen wir einige Regeln für die Navigationsmethoden fest:

.Eulen-Karussell .owl-Punkte, .owl-Karussell .owl-nav Position: absolut;  .owl-carousel .owl-dots .owl-dot span background: transparent; Rand: 1px Volltonfarbe (- Hauptfarbe Schwarz); Übergang: alle 0,2s Leichtigkeit;  .owl-carousel .owl-dots .owl-dot: hover-Spanne, .owl-carousel-.owl-dots .owl-dot.active span background: var (- main-black-color);  .owl-carousel .owl-nav left: 50%; Top 10%; transform: translateX (-50%); Marge: 0; 

Hinweis: Die Folien sollten die volle Fensterhöhe abdecken und wir geben sie daher Höhe: 100 Vh. Da dieses Gerät jedoch für einige Geräte (z. B. iOS-Geräte) inkonsistent ist, können Sie die Höhe der Folien mit JavaScript einstellen (weitere Informationen finden Sie im JavaScript-Bedienfeld der Demo)..

3. Das JavaScript

An dieser Stelle können wir uns dem JavaScript widmen.

Das Karussell initialisieren

Als ersten Schritt initialisieren wir das Karussell. Standardmäßig bietet das Plugin „Punktnavigation“, unser Karussell enthält jedoch auch Navigationspfeile. 

Eulen-Navigationsoptionen

Wir aktivieren die Navigationsoption über die nav Konfigurationseigenschaft. Außerdem definieren wir dank des Symbols einige benutzerdefinierte SVGs als Pfeile navText Konfigurationseigenschaft.

Der Code, der das Karussell auslöst, ist unten dargestellt:

const $ owlCarousel = $ (". owl-carousel"). owlCarousel (items: 1, loop: true, nav: true, navText: ['','']);

Animationen zu Folienelementen hinzufügen

Als nächsten Schritt animieren wir den Inhalt jeder Folie. Dieses Verhalten wird durch die behandelt geändert Ereignis, das die Eule bietet. 

Hier ist der zugehörige Code:

$ owlCarousel.on ("changed.owl.carousel", e => $ (". owl-slide-animated"). removeClass ("is-transitioned"); const $ currentOwlItem = $ (". owl-item") ) .eq (e.item.index); $ currentOwlItem.find (". owl-slide-animated"). addClass ("is-transitioned");); 

Jedes Mal, wenn wir eine neue Folie besuchen, verschwindet zunächst der Inhalt aller Folien. Dann erscheint der Inhalt der aktuellen Folie mit einer schönen Slide-In-Animation.

Hinweis: anstatt der geändert Event hätten wir auch gleich nutzen können übersetzt Veranstaltung.

Bisher haben wir gesehen, wie die Animationen ausgelöst werden, während wir durch die Folien blättern. Wir möchten diese Art von Animation jedoch auch, wenn das Karussell anfangs geladen wird. Um diese Funktionalität zu implementieren, verwenden wir die initialisiert Veranstaltung.

Hier ist der Code für dieses Ereignis:

/ * Sie müssen das initialisierte Ereignis vor der Initialisierung der Eule binden (siehe Demo) * / $ (". owl-carousel"). on ("initialized.owl.carousel"), () => setTimeout (()) => $ (".owl-item.active .owl-slide-animated"). addClass ("is-transitioned");, 200););

Innerhalb dieses Ereignisses fügen wir die wird umgestellt Klasse zu den Elementen der ersten Folie.

Es ist wichtig zu wissen, dass dieses Ereignis vor der Initialisierung des Karussells angehängt werden muss.

Verhindern des Seitensprungs beim Laden

Bevor wir weitermachen, wollen wir eine knifflige Sache behandeln. Wenn Sie sich die Demo-Seite ansehen, sehen Sie, dass es eine Sektion Element unterhalb des Karussells definiert. Bis zum Laden des Karussells wird standardmäßig der Abschnittsinhalt angezeigt, und auf unserer Seite wird ein kleiner Sprung ausgeführt. 

Es gibt zwei Möglichkeiten, dieses unerwünschte Verhalten zu beheben. Zuerst können wir einen Preloader hinzufügen (das haben wir bereits in dem Slick-Tutorial getan). Eine zweite Option, die wir hier implementieren, ist das Ausblenden von Sektion und zeigen Sie es, sobald das Karussell initialisiert ist.

In Bezug auf den Code wird folgende CSS-Regel benötigt:

Abschnitt Anzeige: keine; 

Und der JavaScript-Code:

$ (". owl-carousel"). on ("initialized.owl.carousel"), () => setTimeout (()) => // anderer Code hier $ ("section"). show ();, 200););

Einstellen der Punktposition

Als letztes müssen wir die Punktnavigation positionieren. Standardmäßig ist es absolut positioniert. Folgendes sollte passieren:

1. Es sollte horizontal mit dem ausgerichtet sein .Eulen-Dia-Text Element der Zielfolie. 
2. Es sollte unter diesem Element mit einem 20px oberen Spalt positioniert werden.

Die Funktion, die ausgeführt wird und die gewünschte Position für unsere Punkte festlegt, ist die setOwlDotsPosition.

Hier ist diese Funktion:

function setOwlDotsPosition () const $ target = $ (". owl-item.active .owl-slide-text"); doDotsCalculations ($ target); 

Dies isoliert das .Eulen-Dia-Text Element der aktiven Folie und übergibt es als Argument an die doDotsCalculations  Unterfunktion.

Hier ist diese Unterfunktion:

function doDotsCalculations (el) const height = el.height (); const oben links = el.position (); const res = Höhe + Spitze + 20; $ (". owl-carousel .owl-dots"). css (top: '$ res px', links: '$ left px'); 

Innerhalb dieser Funktion setzen wir das passende oben und links Werte der .Eulenpunkte Element basierend auf der Höhe und Position des Zielelements. 

Catering für Browser-Größenänderung

Wenn Sie einen Schritt weiter gehen, sollte die Position der Punkte aktualisiert werden, wenn Sie die Größe des Browser-Fensters ändern. Um dies zu erreichen, nutzen wir die Größe ändern Eulenereignis.

Hier ist der notwendige Code:

$ owlCarousel.on ("resize.owl.carousel"), () => setTimeout (() => setOwlDotsPosition ();, 50););

Positionierung abhängig vom Inhalt

Wenn Sie durch die Folien navigieren, müssen die Punkte in Abhängigkeit von der Höhe und Position des Inhalts der aktiven Folie neu positioniert werden. Danke an die geändert Auch hier können wir diese neue Anforderung lösen.

Hier ist der zugehörige Code:

$ owlCarousel.on ("changed.owl.carousel"), e => // anderer Code hier const $ currentOwlItem = $ (". owl-item"). eq (e.item.index); const $ target = $ currentOwlItem.find (". owl-slide-text"); doDotsCalculations ($ target););

Profi-Tipp

Bevor wir schließen, sollten wir einen verbreiteten Eulenfehler besprechen. Wenn wir den Abschnitt entfernen, der unter dem Karussell liegt, verschwindet die vertikale Bildlaufleiste undEin Teil der benachbarten Folie wird angezeigt.

Um dies zu beheben, lösen wir das aus Aktualisierung Ereignis nach der Karussellinitialisierung wie folgt: $ owlCarousel.trigger ("refresh.owl.carousel");

4. Browserunterstützung

Die Demo sollte in allen aktuellen Browsern gut funktionieren und Sie können sie in Ihren Projekten sicher verwenden. Hier ist eine Erinnerung an das, was wir gebaut haben:

Fazit

In diesem umfassenden Tutorial haben wir es geschafft, mit owl.js einen animierten Vollbild-Karussell-Schieberegler zu erstellen. Hoffentlich haben Sie einige neue Fähigkeiten erworben, die Sie in Ihren anstehenden Projekten in die Praxis umsetzen können. Wenn Sie Fragen haben, lassen Sie es mich wie folgt wissen.