slick – plugin jQuery – Le carrousel responsive

slick-jquery-plugin-carouselslick est un plugin jQuery qui va vous permettre d’intégrer un carrousel responsive.

Il est très simple à mettre en place et d’utilisation.

Avant de commencer, assurez vous d’avoir téléchargé le plugin, ici : https://github.com/kenwheeler/slick/archive/1.5.0.zip

Ensuite, créez votre bloc de données à intégrer au carrousel, comme suit :

<div class="your-class">
  <div>votre contenu</div>
  <div>votre contenu</div>
  <div>votre contenu</div>
</div>

Ajoutez les liaisons vers les fichiers css du plugin :

 

Ajoutez les appels javascript au plugin :

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Initialisez le carrousel :

$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});

Pour connaitre les éléments optionnels, rendez-vous sur le site du plugin et cliquez sur l’onglet settings : http://kenwheeler.github.io/slick

Après ça vous avez votre carrousel en responsive 🙂

Vous avez plusieurs démo sur la page du plugin jQuery, en cliquant sur l’onglet demo : http://kenwheeler.github.io/slick

Bon code à tous !

Author: Franck Pertegas

Share This Post On

2 Comments

  1. Salut,

    Je n’arrive absolument pas à faire en sorte que Slick marche ,,,,

    Un coup de pousse serai top !

    merci !

    Post a Reply
    • Salut,

      Je n’arrive absolument pas à faire en sorte que Slick marche ,,,,

      Un coup de pousse serai top !

      merci

      Post a Reply

Submit a Comment

Votre adresse e-mail ne sera pas publiée.