Note: J’écris ce tutoriel puisque le site officiel de Owl Carousel 2 n’est pas toujours disponible en ligne. Attention de ne pas mélanger Owl Carousel 2 avec Owl Carousel 1, deux versions incompatibles entre elles.
INSTALLATION DÉMO DOCUMENTATION
Beaucoup d’eau a coulé depuis la première « Bannières rotatives » des Trucsweb. Et malgré tout, encore aujourd’hui, aucun site ne peut se passer d’un carrousel. Je me souviens quand jQuery est arrivé comme un boulet de canon. Des années d’effort pour se rendre compte qu’on n’arrivera jamais à rivaliser avec la centaine de programmeurs de jQuery. Outre les problèmes de compatibilité d’alors, parfois pour de simples petits détails esthétiques : la transparence, les transitions et surtout l’animation.
Aujourd’hui, tout aussi gratuit, le HTML5, le CSS3 et le Javascript 6 remplacent efficacement jQuery à plusieurs égards. Et même si jQuery est lourd, la plupart des gabarits l’utilisent, alors pourquoi pas! Je me suis donc mis à scruter le web pour trouver un bon carrousel. J’ai trouvé de tout, j’ai même acheté quelques carrousels, pour la plupart utilisés. Mes recherches furent laborieuses, mais aucun n’était véritablement satisfaisant. Je cherchais, il est vrai, un carrousel adaptatif (responsive), mais aussi tactile (Touch enabled), HTML5 et dans son plus simple appareil, un conteneur d’image! Tant qu’à payer!
C’est alors que je suis tombé sur ce petit bijou. Simple clair et net « Owl Carousel » est certainement le meilleurs de sa catégorie et entièrement gratuit! Si les boss de bombardier peuvent augmenter leurs millions de profit de 45% en une seule année pendant que les actions de la compagnie baissent d’autant, ce n’est certes pas pour payer les programmeurs analystes ;-3
Éprouvé depuis des années déjà, je vous garantis que ce script offre une grande flexibilité en toute simplicité. Peu importe si vous êtes un débutant ou un utilisateur avancé, Owl Carousel est un jeu d’enfant. Et si vous avez des caprices, aucun problème, avec une base jQuery tout est possible!
Quelques fonctionnalités
- Défilement infini
- Item centré
- Vitesse intelligente
- Remplissage de l’espace
- Marge par l’item
- Adaptatif (responsive)
- Différentes largeurs
- Évènements de rappel (Callback)
- RTL
- Support YouTube/Vimeo/vzaar (avec récupération des vignettes)
- Navigation avec ancrages
- Items fusionnés
- et plus encore...
- Compatibilité
- Chrome
- Firefox
- Opera
- IE7/8/10/11/Edge
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- Nokia 8s Windows8
Exemple tout simple
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css" />
</head>
<body>
<h5>Avec image</h5>
<div class="owl-carousel">
<img src="https://images.pexels.com/photos/97077/pexels-photo-97077.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 1" />
<img src="https://images.pexels.com/photos/239898/pexels-photo-239898.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 2" />
<img src="https://images.pexels.com/photos/177598/pexels-photo-177598.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 3" />
<img src="https://images.pexels.com/photos/330771/pexels-photo-330771.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 4" />
<img src="https://images.pexels.com/photos/325111/pexels-photo-325111.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Mon image 5" />
</div>
<hr />
<h5>Avec texte</h5>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
autoplay:true,
loop:true
})
});
</script>
</body>
</html>
Pour plus d’information, consultez la section « Doc » du Owl Carousel 2.
Autres solutions gratuite
Un autre bon carrousel complet c’est Slick.js ou encore un carrousel sans dépendance à jQuery Glider.js
Références
- Owl Carousel 2
- jQuery
- OwlCarousel2-2.2.1.zip
- Bannières rotatives des Trucsweb
- Image de PEXELS programming Photos
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/documents/images/2016/modal-pdf.jpg)
AbuseIPDB
Connexion