Posted By Franck Pertegas on 27 Avr 2015 in Framework, Javascript, Programmation | 2 comments

slick 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 :

[pastacode lang= »markup » manual= »%3Cdiv%20class%3D%22your-class%22%3E%0A%20%20%3Cdiv%3Evotre%20contenu%3C%2Fdiv%3E%0A%20%20%3Cdiv%3Evotre%20contenu%3C%2Fdiv%3E%0A%20%20%3Cdiv%3Evotre%20contenu%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

Ajoutez les liaisons vers les fichiers css du plugin :

Ajoutez les appels javascript au plugin :

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2F%2Fcode.jquery.com%2Fjquery-1.11.0.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2F%2Fcode.jquery.com%2Fjquery-migrate-1.2.1.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22slick%2Fslick.min.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Initialisez le carrousel :

[pastacode lang= »javascript » manual= »%24(document).ready(function()%7B%0A%24(‘.your-class’).slick(%7B%0Asetting-name%3A%20setting-value%0A%7D)%3B%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

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 !