Owl Carousel & Responsive Slider
Owl Carousel est un curseur de carrousel réactif facile à utiliser, pouvant être mis à jour, rapide et gratuit avec une structure de code modifiable. Il fonctionne avec la bibliothèque jquery et est compatible avec de nombreux navigateurs courants.
Ils peuvent également être utilisés en utilisant les flèches directionnelles, le glisser-déposer et la boucle automatique.
Navigateurs et appareils compatibles avec Owl Carousel
- Google Chrome
- Mozilla Firefox
- Opera
- IE7/8/10/11
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- Nokia 8s Windows8
Owl Carousel Installation
Les codes CSS et Javascript Owl Carousel doivent être ajoutés à la page Web HTML avec les codes Jquery.
Codes CSS
Ajoutez les codes CSS suivants dans les balises <head></head>.
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">Vous pouvez héberger les codes CSS au même endroit que le projet conçu ou les appeler via https://owlcarousel2.github.io/OwlCarousel2/ en ajoutant les codes suivants.
<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">Remarque : Comme l’appel des codes CSS depuis l’extérieur créera un inconvénient en termes de performances, il serait plus juste de les appeler depuis la même zone de stockage que le projet.
Codes Javascript
Ajoutez les codes Javascript qui font fonctionner Owl Carousel dans le champ après la fermeture des balises <body></body>.
Remarque : Ces codes fonctionnent également lorsqu’ils sont ajoutés à n’importe quelle zone de la page, mais l’ajout de codes <script></script> au bas de la page sera plus avantageux en termes de vitesse du site.
<script src="jquery.min.js"></script>
<script src="owl.carousel.js"></script>Vous pouvez également appeler des codes Javascript de l’extérieur comme les codes CSS. Ou vous pouvez le conserver dans le même fichier que le projet conçu. Vous pouvez appeler les codes Javascript requis pour Owl Carousel Slider via https://owlcarousel2.github.io/OwlCarousel2/ avec l’utilisation suivante.
<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>Ajoutez la bibliothèque Javascript suivante pour effectuer des ajustements tels que le nombre d’éléments qui apparaîtront en fonction des paramètres de boucle Owl Carousel, des touches fléchées et des tailles d’écran.
Remarque : Ces codes doivent être sous les codes jquery.min.js et owl.carousel.js, sinon Owl Carousel ne fonctionnera pas.
Codes HTML
Vous pouvez utiliser la version la plus simple de Owl Carousel (sans touches fléchées ni curseurs) avec les codes ci-dessous.
<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>Source:
https://owlcarousel2.github.io/OwlCarousel2/