Owl Carousel 2-Tutorial zum Konfigurieren der Vollbild-Anzeige einzelner Bilder

Owl Carousel 2 zeigt standardmäßig mehrere Karussellartikel an. Wenn Benutzer erwarten, ähnliche "Überschreiber" oder eine einzelne Vollbild-Display-Effekte zu erzielen, müssen sie durch Anpassen ihrer Initialisierungsparameter gelöst werden. In diesem Artikel wird ausführlich erläutert, wie man Owl Carousel 2 so konfigurieren, dass ein einzelnes Bild erwartungsgemäß angezeigt wird, und vollständige Codebeispiele bereitzustellen, um den Entwicklern dabei zu helfen, die erforderlichen Karouseleffekte schnell zu erzielen und sicherzustellen, dass die Bilder auf die erwartete Weise dargestellt werden.

Verstehe den Anzeigemechanismus von Owl Carousel

Owl Carousel ist ein beliebtes Reaktionsanschluss JQuery Carousel Plug-In. Die Kernfunktion besteht darin, eine Reihe von Bildern oder Inhaltselementen in einem Karussellformular basierend auf den konfigurierten Parametern anzuzeigen. Standardmäßig versucht Plug-in, mehrere Karussellelemente in der Ansicht anzuzeigen, beispielsweise kann eine gemeinsame Standardkonfiguration gleichzeitig 3 Elemente angezeigt. Wenn Entwickler erwarten, dass Karussell nur ein Bild gleichzeitig anzeigen und den gesamten Karussellbereich (ähnlich dem Effekt der Hintergrundbildabdeckungsattribute, das heißt, die Vollbildabdeckung einzelner Bilder), feststellen, dass mehrere Bilder tatsächlich nebeneinander angezeigt werden, ist dies normalerweise kein Problem mit der CSS -Abdeckungsattribute, aber ein Problem mit der eigenen Konfiguration des Owl -Carousel.

Lösung: Konfigurieren von Elementenparametern

Damit Eulen Karussell jeweils nur ein Karussell angezeigt und einen visuellen Effekt erzielt, der "Single-Overlay" ähnelt, besteht der Schlüssel darin, die Elementeparameter während der Initialisierung korrekt einzustellen. Der Parameter von Elementen gibt die Anzahl der Karussellelemente an, die gleichzeitig im sichtbaren Bereich angezeigt werden sollen. Stellen Sie es auf 1 ein, um den Zweck zu erreichen.

Im Folgenden finden Sie spezifische Konfigurationsmethoden und Codebeispiele:

1. Einführung der erforderlichen Bibliotheksdateien

Stellen Sie die CSS- und JavaScript -Dateien von JQuery Library und Owl Carousel am unteren Rand der HTML -Datei vor.

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.3.4/assets/owl.thefault.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.3.4/owl.carousel.min.js"> </script>

2. HTML -Struktur

Erstellen Sie einen Container für Owl-Karussell und fügen Sie den entsprechenden Klassennamen hinzu (z. B. Owl-Carousel). Legen Sie Ihre Karussellartikel (wie Bilder) in den Behälter.

 <div class="owl-carousel owl-themen">
    <div class="item"> <img src="image1.jpg" alt="Bild 1"> </div>
    <div class="item"> <img src="image2.jpg" alt="Bild 2"> </div>
    <div class="item"> <img src="image3.jpg" alt="Bild 3"> </div>
    
</div>

A. JavaScript -Initialisierungskonfiguration

Verwenden Sie nach dem Laden des Dokuments JQuery, um Ihren Karussellbehälter auszuwählen und die Owlcarousel () -Methode zur Initialisierung aufzurufen. Stellen Sie in der Initialisierungsoption die Elemente -Eigenschaft auf 1 fest.

 $ (Dokument) .Ready (function () {
  $ (". Owl-Carousel"). Owlcarousel ({{
    Schleife: TRUE, // Schleife Wiedergabe Autoplay: True, // AutoplayTimeout aktivieren: 3000, // Autoplay -Intervall (Millisekunden)
    AutoplayHoverPause: TRUE, // Automatische Wiedergabeelemente innehalten: 1, // Schlüsseleinstellungen: Es wird nur ein Karussellelement gleich angezeigt.
});

Durch das Einstellen von Elementen auf 1 setzt Owl Carousel sicher, dass jederzeit nur ein Karussellartikel angezeigt wird und dieses Element automatisch zu der Breite seines Containers angepasst wird und eine "Vollbildabdeckung" -ähnliche visuelle Wirkung erreicht.

Dinge zu beachten

• Versionskompatibilität: Dieses Tutorial basiert auf Owl Carousel Version 2.3.4. Obwohl die Kernkonfiguration über Versionen hinweg konsistent sein kann, wird empfohlen, die offizielle Dokumentation der Version zu konsultieren, die Sie für die genauesten Informationen verwenden.
• Bildgröße vs. CSS: Obwohl Elemente: 1 ein einzelnes Bild den Karussellbereich besetzen, die ursprüngliche Größe des Bildes und die CSS-Stile, die Sie anwenden können (z. B. Breite: 100%; Höhe: Auto; Objekt-Fit: Abdeckung; usw.) wirkt sich weiterhin auf den endgültigen Anzeigeffekt aus. Für optimale "Deckungsergebnisse" wird empfohlen, den Bildern im Karussell geeignete CSS -Stile hinzuzufügen, z. B.:

   .Winkel-Carousel .Item img {
      Breite: 100%;
      Höhe: 100%; /* oder feste Höhe*/
      Objekt-Fit: Deckung; /* Stellen Sie sicher, dass das Bild den gesamten Bereich abdeckt und die Kanten erstellen kann
      Anzeige: Block;
  }
  .owl-carousel .Item {
      Höhe: 400px; /* Setzen Sie die feste Höhe des Karussellartikels*/
      Anzeige: Flex; /* Wenn Inhalte erforderlich sind*/
      Ausrichtung: Zentrum;
      Justify-Content: Center;
  }

• Responsive Design: Wenn Sie in verschiedenen Bildschirmgrößen verschiedene Zahlen von Karussellartikeln angezeigt werden möchten, können Sie das Responsive Attribut verwenden. Beispielsweise wird 1 auf einem kleinen Bildschirm angezeigt, 2 wird auf einem mittleren Bildschirm und 3 auf einem großen Bildschirm angezeigt.

   $ (". Owl-Carousel"). Owlcarousel ({{
      Schleife: wahr,
      Autoplay: Richtig,
      Elemente: 1, // standardmäßig wird 1 auf alle Bildschirme reaktionsschnell angezeigt: {{
          0: {// Wenn die Bildschirmbreite weniger als 0px Elemente beträgt: 1
          },
          600: {// Wenn die Bildschirmbreite größer oder gleich 600px -Elementen ist: 1
          },
          1000: {// Wenn die Bildschirmbreite größer oder gleich 1000px -Elementen ist: 1
          }
      }
  });

  Beachten Sie, dass selbst in einer ansprechenden Konfiguration Elemente unter allen Haltepunkten auf 1 gesetzt werden sollten, wenn Ihr Ziel immer ein einzelnes Bild angezeigt wird.

Zusammenfassen

Wenn Owl Carousel 2 nicht wie erwartet einzelne Bilder anzeigt, aber mehrere Bilder nebeneinander angezeigt werden, ist die Grundursache der Standardwert des Parameters der Elemente. Durch explizites Einstellen von Elementen: 1 in der Initialisierungskonfiguration können Sie einfach nur den Effekt der Anzeige eines Karussellelements gleichzeitig erreichen und so die visuellen Anforderungen der "Vollbildabdeckung des Einzelbildes" erfüllen. Die Kombination des entsprechenden CSS -Stils und der reaktionsschnellen Konfiguration kann ein leistungsstarkes und visuell leistungsstarkes Bildkarousel erstellt werden.

Das obige ist der detaillierte Inhalt vonOwl Carousel 2-Tutorial zum Konfigurieren der Vollbild-Anzeige einzelner Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!