Le meilleur plugin pour slider ?

owl-logo

Il existe d’innombrables plugins jQuery pour créer des sliders (ou carrousels), mais celui-ci est à coup sûr un des meilleurs, si ce n’est le meilleur (mais je ne les ai pas tous testés donc je ne peux pas l’affirmer !).
Il s’agit de OWL Carousel 2, sous licence MIT.

Voici ses principales caractéristiques :
owl1

  • Adapté aux devices touch : on peut faire défiler avec le doigt
  • Responsive : la hauteur et la largeur des slides s’adapte à l’écran
  • Animations aux possibilités presque infinies lors des transitions entre les slides
  • Adapté aux navigateurs récents et anciens (IE7+ et fallback CSS 2 pour ces derniers)
  • Supporte les vidéos Youtube et Vimeo avec miniature
  • Largeurs et longueurs différentes pour chaque slide : le slider s’adapte parfaitement
  • URL Hash navigation
  • Lazy loading
  • Les données des slides peuvent venir de JSON
  • Autoplay
  • Callback events grâce auxquels nous pouvons avoir le contrôle sur chaque événement
  • Contrôlable à la molette de la souris
  • API offrant beaucoup de contrôle et bien documentée
  • Complètement customisable (thème, CSS et JS)

Comment l’utiliser ?

Inclure le CSS :

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

Inclure le JS :

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Ecrire le code HTML :

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

Aucune balise particulière n’est obligatoire, la seule obligation est de regrouper les enfants dans un parent ayant la classe « owl-carousel ».

Appeler le plugin depuis la page HTML ou un fichier JS :

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

Personnalisation :

Les options sont simples à régler, il suffit de suivre une syntaxe JSON et de connaître la liste des options  :

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Dans cet exemple nous donnons des paramètres différents à chaque breakpoint (nombre d’items à afficher, si le slider revient au 1er slide après le dernier, si on affiche les liens de navigation…). On peut vraiment tout paramétrer, il suffit de lister ici toutes nos options et leur valeur.
Exemple avec des vidéos :

 $('.owl-carousel').owlCarousel({
        items:4,
        loop:false,
        center:true,
        margin:10,
        URLhashListener:true,
        lazyLoad:true,
        responsive:true,
        video:true,
        autoplayHoverPause:true,
        autoWidth:true,
        startPosition: 'URLHash'
});

Code HTML pour les vidéos (très simple) :

<div class="owl-carousel">
    <div class="item-video"><a class="owl-video" href="http://vimeo.com/23924346"></a></div>
    <div class="item-video"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
    <div class="item-video"><a class="owl-video" href="http://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
    <div class="item-video"><a class="owl-video" href="http://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
    <div class="item-video"><a class="owl-video" href="http://www.youtube.com/watch?v=H3jLkJrhHKQ"></a></div>
    <div class="item-video"><a class="owl-video" href="https://www.youtube.com/watch?v=g3J4VxWIM6s"></a></div>
    <div class="item-video"><a class="owl-video" href="http://www.youtube.com/watch?v=0fhoIate4qI"></a></div>
    <div class="item-video"><a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a></div>
</div>

Exemple de construction du slider via JSON :

$("#owl-demo").owlCarousel({
    jsonPath : "json/data.json" 
});
On indique le chemin du fichier JSON

{
"owl" : [
	{"item" : "<span class='item'><h1>1</h1></span>"},
	{"item" : "<span class='item'><h1>2</h1></span>"},
	{"item" : "<span class='item'><h1>3</h1></span>"},
	{"item" : "<span class='item'><h1>4</h1></span>"},
	{"item" : "<span class='item'><h1>5</h1></span>"}
	]
}
Code JSON possible

Il est aussi possible de faire du JSON différent et de reconstruire le DOM dans une fonction de callback :

$("#owl-demo").owlCarousel({
    jsonPath : 'json/customData.json',
    jsonSuccess : customDataSuccess
});
Appel d'une fonction qui va créer les enfants dans le HTML

A l’heure où les différentes tailles d’écrans ne cessent d’augmenter, voici un plugin qui marchera sur tous les appareils et qui vous assurera un rendu de qualité sans devoir bidouiller en CSS comme cela peut arriver.
Voilà pour la présentation de ce plugin très complet, qui répondra à de nombreux besoins grâce à toutes ses options et personnalisations possibles. J’espère qu’il vous sera utile !

Ressources :
http://owlcarousel.owlgraphic.com/index.html

Démos :
http://owlcarousel.owlgraphic.com/docs/started-welcome.html

Documentation :
http://owlcarousel.owlgraphic.com/demos/demos.html
https://github.com/smashingboxes/OwlCarousel2

 

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

5 × sept =