[Drupal] How to create a responsive carousel using slick in Drupal

Slick Carousel is a Drupal module for ken wheelers slick carousel. Slick Carousel is fully responsive and it works with views.

Following are the steps to create a responsive slick carousel in your site,

• Step 1

  Download and enable the modules slick, slick fields, slick views.

• Step 2

  Download slick library from https://github.com/kenwheeler/slick/ and place it in sites/all/libraries/slick/. So the needed assets will be available at,

   sites/../libraries/slick/slick/slick.css
    sites/../libraries/slick/slick/slick.min.js

• Step 3

  Sick recquires ctools and jquery_update with jQuery > 1.7.

• Step 4

  Go to configuration -> media -> slick carousel. In there you can create a new configuration for the carousel you are about to create.

There are three tabs in the configuration named,

• General

  In the general tab you can select the image style for your carousel and the thumbnail style.

• Settings

  Settings tab provides a number of options, you can turn on swipe to slide option, slides to display etc.

• Responsive display

  In here you can add the break points, you can set the breakpoint width and set settings for that particular break point.

Save the configuration once you are done with all the settings.

• Step 5

  Create a view block, select format 'slick carousel'. In format settings select the carousel settings we created previously in option set main. Give value for grid large, grid small and grid medium. Add one for visible slide. Select the image field which you want to show in the carousel. Save the view and assign the block in the desired region.