Owl Carousel & Responsive Karussell
Owl Carousel ist ein einfach zu bedienender, aktualisierbarer, schnell und kostenlos reagierender Karussell-Schieberegler mit bearbeitbarer Codestruktur. Es funktioniert mit der jquery-Bibliothek und ist mit vielen gängigen Browsern kompatibel.
Sie können auch mit Richtungspfeilen, Drag & Drop und automatischer Schleife verwendet werden.
Mit Owl Carousel kompatible Browser und Geräte
- Google Chrome
- Mozilla Firefox
- Opera
- IE7/8/10/11
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- Nokia 8s Windows8
Installation des Owl Carousel
Owl Carousel CSS- und Javascript-Codes müssen zusammen mit Jquery-Codes zur HTML-Webseite hinzugefügt werden.
CSS Codes
Fügen Sie die folgenden CSS-Codes in die <head></head> Tags ein.
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">Sie können die CSS-Codes an derselben Stelle wie das entworfene Projekt hosten oder sie über https://owlcarousel2.github.io/OwlCarousel2/ aufrufen, indem Sie die folgenden Codes hinzufügen.
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">Hinweis: Da der Aufruf der CSS-Codes von außen einen Performance-Nachteil erzeugt, wäre es genauer, sie aus dem gleichen Speicherbereich wie das Projekt aufzurufen.
Javascript Codes
Fügen Sie die Javascript-Codes, die das Eulenkarussell zum Laufen bringen, dem Feld hinzu, nachdem die <body></body>-Tags geschlossen wurden.
Hinweis: Diese Codes funktionieren auch, wenn sie zu einem beliebigen Bereich der Seite hinzugefügt werden, aber das Hinzufügen von <script></script>-Codes am Ende der Seite ist im Hinblick auf die Geschwindigkeit der Website vorteilhafter.
<script src="jquery.min.js"></script>
<script src="owl.carousel.js"></script>Sie können Javascript-Codes auch von außen wie CSS-Codes aufrufen. Oder Sie können es in derselben Datei wie das entworfene Projekt aufbewahren. Sie können die erforderlichen Javascript-Codes für Owl Carousel Slider über https://owlcarousel2.github.io/OwlCarousel2/ mit der folgenden Verwendung aufrufen.
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>Fügen Sie die folgende Javascript-Bibliothek hinzu, um Anpassungen vorzunehmen, z. B. wie viele Elemente gemäß den Schleifeneinstellungen des Eulenkarussells, den Pfeiltasten und der Bildschirmgröße angezeigt werden.
Hinweis: Diese Codes sollten sich unter den Codes jquery.min.js und owl.carousel.js befinden, sonst funktioniert Owl Carousel nicht.
HTML Codes
Sie können die einfachste Version von Owl Carousel (ohne Pfeiltasten und Schiebepunkte) mit den folgenden Codes verwenden.
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Slide 1</h2>
</div>
<div class="item">
<h2>Slide 2</h2>
</div>
<div class="item">
<h2>Slide 3</h2>
</div>
<div class="item">
<h2>Slide 4</h2>
</div>
<div class="item">
<h2>Slide 5</h2>
</div>
<div class="item">
<h2>Slide 6</h2>
</div>
<div class="item">
<h2>Slide 7</h2>
</div>
</div>Verweise:
https://owlcarousel2.github.io/OwlCarousel2/