How to use the Slick Module in Drupal 8

One of OSTraining’s members wants to have a carousel slider in her site. She wants the carousel to show 3 image slides and some text below them, and the carousel to move only one position at a time when you click the “Next” button.

This is possible to achieve, thanks to the Drupal Slick module which has several options and settings to customize this interaction with a couple of clicks.

Keep reading in order to learn how to use this module!

---

Step #1. Install the Module

• In order to build the carousel, we have to install two modules and their corresponding third-party libraries.
  • Open the Terminal application of your system
  • Type: composer require drupal/slick 

Now, it is time to add the JS library for the slick module. You can use the file manager of your operating system or the terminal for the next operation:

• Type the following commands in order:

mkdir libraries 

This creates a directory called libraries in the root folder of your Drupal installation.

cd libraries

To access the directory.

wget https://github.com/kenwheeler/slick/archive/1.8.0.tar.gz

This command downloads the slick library from its GitHub repository in a compressed tar.gz file.

tar xzvf 1.8.0.tar.gz

To uncompress the tar.gz file.

mv slick-1.8.0/ slick

To change the name of the uncompressed folder.

cd ..

To go back to the root folder.

composer require “drupal/blazy:1.0-rc4”

This will download the specific version of Blazy, required for Slick to work properly, since the stable version of Slick works only with version 1.0 of Blazy.

mv blazy-master/ blazy

To change the name of the uncompressed folder.

rm *.zip && rm *.tar.gz

To delete both compressed files.

You should at the end have the following folder structure:

The files slick.min.js and blazy.min.js are inside the slick and blazy folders respectively.

cd ..

To go back to the root folder.

composer require drupal/slick_views

This will download the Slick Views module, which integrates Drupal Views with Slick.

• Click Extend.
• Enable the following modules:
  • Blazy
  • Blazy UI
  • Slick
  • Slick UI
  • Slick Views
• Click Install.

We are now set and can proceed with configuring the Slick Optionset.

---

Step #2. The Slick Optionset

• Click Configuration > Slick.

The first configuration screen shows the list of available Slick optionsets. Imagine optionsets as cassettes or CDs, which you can exchange in your player to get the right song (in this case the right carousel). The bottom half of the screen shows all different skins, that can be applied to the carousel. This functionality will be covered in a future tutorial. The UI tab has two options regarding the style of these skins.

• Click Add slick optionset.

You will be presented with a lot of options, most of them are self-explanatory. Let’s take a look at some of them.

• Give the optionset a proper label.
• Replace the Previous and Next arrows text with the symbols “<” (less than) and “>” (greater than), so that the code reads like this:

<button type=”button” data-role=”none” class=”slick-prev” aria-label=”Previous” tabindex=”0″> < </button>

• Increase the number of Slides to show to 3.
• Increase the speed to 900ms (making the slide effect slower).
• Change the CSS override to swing.
• Click Save.

---

Step #3. – Create the Carousel View

• Click Structure > Views > Add view.
• Enter a proper name for the view.
• Show Content of type Article.
• Select Create a block.
• Choose Slick Carousel of fields.
• Set the number of Items per block to 0.
• Click Save and edit.

• Click Add in the Fields section.
• Enter Body in the search box.
• Check the Body option.
• Enter Image in the search box.
• Check the Image option.
• Click Add and configure fields.

• Change the Formatter option to Trimmed.
• Set the number of characters to 150 as the Trimmed limit.
• Click Apply and continue.

• Change the Image style to Medium.
• Link the image to the Content.
• Click Apply.

• Rearrange the fields in this order:
  • Image
  • Title
  • Body
• Click the Slick Carousel Settings.
• Check Vanilla Slick.
• Select the optionset you created before.
• Click Apply.

• Save the view

---

Step #4. – Place the Block

• Click Structure > Block layout.
• Scroll down to the Content section.
• Click Place block.
• Search for the view you have just created.
• Click Place block.

• Drag the block behind the Main page content block.
• Scroll down and click Save blocks.

Now you can take a look at one of your articles and test the carousel. Congratulations!

The rest is CSS styling. To improve the layout, for example with CSS Grid, take a look at this article.

Thanks for reading!