Technical Solution

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

Wellme.m | | 1 min read

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.

 

 

Related Topics