| Drupal

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!

191216 slick


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 

191216 slick 000 

 

 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.

191216 slick 001

 

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.

191216 slick 003

 

mv blazy-master/ blazy

To change the name of the uncompressed folder.

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

To delete both compressed files. 

191216 slick 004

 

You should at the end have the following folder structure:

191216 slick 005

 

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.

191216 slick 007

 

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


 

Step #2. The Slick Optionset

  • Click Configuration > Slick.

191216 slick 008

 

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.

191216 slick 009

 

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.

191216 slick 010


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.

191216 slick 011

  • 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

191216 slick 015

 

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

191216 slick 013

 

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

191216 slick 014

 

  • 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.

191216 slick 015

 

  • 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.

191216 slick 016

 

  • 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!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.