Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

Ausgewählte Vorlagen

JS Animated. Wie man mit dem Owl Karussell arbeitet

JS Animated. Wie man mit dem Owl Karussell arbeitet

Von diesem Tutorial erfahren Sie, wie man mit dem Owl Karussell in den JS-animierten Vorlagen arbeitet:

JS Animated. How to manage Owl Carousel-1

  1. Überprüfen Sie das Karussell, indem Sie das Entwicklerwerkzeug im Browser Chrome oder Firebug im Browser Firefox nutzen. Sie sehen, dass in diesem Bereich das Owl Karussell benutzt ist:

    JS Animated. How to manage Owl Carousel-2

  2. Öffnen Sie eine entsprechende index Datei in Ihrem Editor. Finden Sie den notwendigen Teil des Codes, indem Sie das Suchfeld im Editor nutzen:

    JS Animated. How to manage Owl Carousel-3

  3. Um mehr Elemente hinzuzufügen, kopieren Sie den Code eines von den Quellenelementen:

    JS Animated. How to manage Owl Carousel-4

  4. Fügen Sie den Code ein. Überzeugen Sie sich, dass die Struktur des Codes nicht geändert wurde. Ändern Sie einen Text und ein Bild:

    JS Animated. How to manage Owl Carousel-5

  5. Speichern Sie die Änderungen, laden Sie die geänderte Datei auf den Server hoch. Aktualisieren Sie die Seite. Sie haben ein neues Element zum Karussell hinzugefügt:

    JS Animated. How to manage Owl Carousel-6

  6. Um die Einstellungen des Karussells zu ändern, sollen Sie das Attribut data nutzen. Sie können erfahren, wie man ein Attribut festlegt, in dem Bereich unten:

    JS Animated. How to manage Owl Carousel-7

  7. Parameter für die automatische Wiedergabe des Karussells (Carousel autoplay configuration): Um die automatische Wiedergabe für Slides zu aktivieren, nutzen Sie das Attribut data-autoplay:

    JS Animated. How to manage Owl Carousel-8

  8. Um die Verwaltungselemente "Zurück"/"Weiter" im Owl Karussell darzustellen, nutzen Sie das Attribut data-nav="true" für das Karussell. Es gibt solches Attribut in unserem Karussell. Achten Sie auf ein vorheriges unten.

    Sie können die Verwaltungselemente deaktivieren, indem Sie false anstatt true wählen.

  9. Mit Hilfe vom Owl Karussell können Sie sowohl ein Element als auch einige Elemente gleichzeitig darstellen. Um mit der Darstellung von Elementen in dem Karussell arbeiten zu können, nutzen Sie ein entsprechendes Attribut data-items и data-*-items. Finden Sie die Anleitungen zur Vorlage, um mehr Informationen darüber zu erhalten. Wir haben die Attribute data-lg-items="1" und data-md-items="1" hinzugefügt:

    JS Animated. How to manage Owl Carousel-9

    Jetzt werden zwei Elemente im Karussell gleichzeitig dargestellt.

    JS Animated. How to manage Owl Carousel-10

  10. Lassen Sie uns zeigen, wie man man mit dem zweiten Owl Karussell arbeiten kann. Wir haben das Karussell mit Hilfe vom Entwicklerwerkzeug im Chrome überprüft. Dieses Karussell bietet denselben Inhalt an. Die Verwaltungselemente des Karussells werden nicht angezeigt und Bilder werden in Lightbox geöffnet:

    JS Animated. How to manage Owl Carousel-11

  11. Finden Sie einen entsprechenden Teil des Codes. Das Attribut data-stage-padding definiert den Abstand im Karussell. Er kann Geräten mit verschiedenen Bildschirmauflösungen angepasst werden. Das Attribut data-lightbox definiert, ob die Galerie in Lightbox verwendet wird:

    JS Animated. How to manage Owl Carousel-12

  12. Der folgende Teil des Codes definiert den Animationseffekt für ein einzelnes Bild:

    JS Animated. How to manage Owl Carousel-13

  13. Sie können die Lightbox für ein einzelnes Bild löschen. Löschen Sie den folgenden Teil des Codes:

    JS Animated. How to manage Owl Carousel-14

  14. Machen Sie sich mit der Anleitung zur Vorlage bekannt, um mehr Informationen darüber (Erweiterungen – Owl Karussell) zu erfahren.

Sie können auch das ausführliche Video-Tutorial nutzen:

JS Animated. Wie man mit dem Owl Karussell arbeitet