[Drupal] How to implement Slick Slider in Drupal 7 ?

November 30, 2016 - 11:13

Slick is a powerful solution for slideshow/carousel. It supports nested sliders and can be implemented in your custom block of Drupal 7 site. Slick has jQuery dependency. Download the latest jQuery and use in your page or use jQuery update module for Drupal 7.

Download slick libraries from https://github.com/kenwheeler/slick/. Extract the folder and place it in sites/all/themes/yourtheme/ and rename the library as slick. While creating slider, we need to use only slick.css and slick.min.js in the folder slick-slider/slick.

We can load libraries in .info file of your theme as,

 stylesheets[all][] = slick/slick.css
      scripts[] = slick/slick.min.js

Or it can be loaded in template.php as,


For slick slider, create a customstyle.js file with following code,
For single item,


For multiple item,

                   infinite: false,
                   slidesToShow: 4,
                   slidesToScroll: 4
  • infinite : Infinite loop sliding
  • slidesToShow : # of slides to show
  • slidesToScroll : # of slides to scroll

Hope this helps! Please feel free to get in touch with us for further queries.

Get Drupal updates straight to your inbox


Post your comments / questions