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

Submit a Comment

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