OwlCarousel, un carousel jQuery responsive et multi-fonctions

29 juillet 2013

OwlCarousel est un plugin jQuery assez complet qui permet de mettre en place un carousel tactile, responsive et animé via CSS3, avec une fonctionnalité originale : pouvoir afficher un nombre de slides différent en fonction du support (desktop, tablette, smartphone).

Un carousel multi-fonctions

OwlCarousel propose un slider à la fois tactile (touch), aggripable avec la souris (grab) et responsive, le tout accompagné d’une vingtaine d’options (durée d’animation, délai entre deux slides, fonctions de callback, etc). Léger et complet, le carousel fonctionne avec n’importe quel contenu HTML et peut également faire office de slideshow.

owl_carousel_jquery

Un seul type de transition est disponible (slide) mais la particularité du plugin réside dans son paramétrage qui permet de définir le nombre de slides à afficher en fonction de la largeur de son conteneur. Ainsi, vous pouvez contrôler précisément le comportement du carousel, par exemple 5 slides sur desktop, 3 slides sur tablette et 1 slide sur smartphone.

Vous retrouverez 4 cas d’utilisation sur le site :

carousel_jquery_images

Carousel standard avec des images

carousel_jquery_responsive

Carousel « full-width » responsive

carousel_jquery_custom

Carousel custom avec nombre de slides qui change

carousel_jquery_slideshow

Carousel « one-slide » slideshow

Mise en place de OwlCarousel

Comme pour tout plugin jQuery, on commence par inclure le framework JS (version 1.7 minimum) et les fichiers du plugin OwlCarousel (le script et deux feuilles de style).

<!-- Basic stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!-- You can use latest version of jQuery  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

On définit la structure HTML du carousel. Pas besoin d’utiliser une liste HTML, il suffit de définir vos différentes slides sous forme de div placées dans une div conteneur avec la classe CSS owl-carousel.

<div id="owl-example" class="owl-carousel">
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   ...
</div>

Et on termine par l’appel du plugin sur le carousel.

$(document).ready(function() {
  $("#owl-example").owlCarousel();
});

FlexSlider est probablement le slider jQuery le plus populaire et le plus complet du moment, mais OwlCarousel est un plugin de qualité qui apporte un petit plus à votre carousel avec le changement du nombre de slides affichées. Bon, et puis il faut dire aussi que la baleine du web ne pouvait pas rester indiférente face à ces rapaces nocturnes (« owl » désignant les chouettes et hiboux) ! Qu’en pensez-vous ?

Requis : jQuery 1.7+
Compatibilité : Chrome, Safari, Firefox, Opera, IE7+, Dolphin, iPhone, iPad, Google Nexus
GitHub : https://github.com/OwlFonk/OwlCarousel
Démonstration : http://owlgraphic.com/owlcarousel/
Licence : MIT

Commentaires

  • Spir
    • Effectivement, c’est une bonne analyse. Cependant, je doute que ces données soient « recevables » pour un client qui souhaite absolument cette fonctionnalité.

    • kalysso

      Je ne suis pas d’accord. Un carousel peut être utilisé en mode slideshow automatique avec des images de fond et apporter un plus niveau interface / design, sans forcément posséder de contenu.

  • Chris

    J’aimerais savoir, où place t-on le framework jQuery ? (Je débute)

    • Dans l’entête (dans la balise head) ou à la fin du document HTML (avant la fermeture de la balise body).

  • Epignosis

    Ce vraiment bidon ton truc là mon ami