How to build a custom Slider using the Slick Library in Drupal 8

It's easy to make a slider in Drupal 8. There are several modules available to render Drupal view slideshow. But for specifics in terms of requirement, it may change like we need different arrows, dots, the number  of slider items and so on. The important part of slideshow should allow responsive too.

The slick plugin allows responsive functionality without doing any extra effect in jQuery by nature. By using this plugin, we can add/remove arrows, dots, no of items in a slide based on device, no of items to scroll in a slide based on device, etc.

Create View Block

1. Create view block for slideshow contents and add your format to “unformatted list” and fields like “content”  or anything else that you want to the field settings.

2. View format should be “unformatted list” else we would need to alter the format by using CSS or render the contents in twig file.

Download slick library

1. Download the slick library and paste it into /libraries folder in your Drupal site directory.
2. Link: https://github.com/kenwheeler/slick.git
3. Create a custom module and add the below code in module_name.libraries.yml file

Use hook_preprocess_page(&$variables)

Attach the library in Drupal hook_preprocess_page. Wherever you want to be based on the condition we can attach this library. Here I have attached on the front page.

Call Slick() function in js file

Here’s the trick for making the Drupal view slideshow responsive using jQuery by calling slick plugin function and attributes.

Calling slick function with the parent class of a view, slick starts rendering ultimately.

We should add .view-content while we call the slick function then only slick attributes will be added automatically with the generated HTML structure.

Add the below code in your js file i.e., custom.js

view-slideshow is nothing, but the parent class name of the view that we created here. For example, if the view name will be “slideshow” the view parent class will be as “view-slideshow” by calling the slick method from slick plugin it will automatically trigger the slider to slide.

By default, slick slider arrows are not showing because of white background. We can alter this through CSS or if you want to overwrite the arrows also possible in CSS by adding a background image.

Result will be like this

So now we have successfully integrated slick plugin and created the slideshow in Drupal 8. In the next blog, I will be discussing how we can make this plugin responsive using custom js.