[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,

 drupal_add_js('PATHTO/slick.js');
 drupal_add_css('PATHTO/slick.css');

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

  $('.yourclassname').slick();

For multiple item,

   $('.yourclassname').slick({
                   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

To prevent automated spam submissions leave this field empty.

Post your comments / questions