How to use the Slick Module in Drupal 8

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!

Author

  • Jorge Montoya

    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.

0 0 votes
Article Rating
Subscribe
Notify of
10 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Stephen Mulvihill
Stephen Mulvihill
4 years ago

Thanks for the great tutorial!

I’m having an issue with the [i]Slides to scroll[/i] setting. I have it set to 1, but it always scrolls all 3 images. Are you able to get the carousel to scroll only 1 image at a time, and if so, what are your settings?

Halil
Halil
3 years ago

Well, thank you for the tutorial, it really helped me a lot to understand.

Siwei
Siwei
2 years ago

Great tutorial! Very helpful!

mikall
2 years ago
Reply to  Siwei

So glad we could help!

Haseeb
Haseeb
2 years ago

Thank You very much 

mikall
2 years ago
Reply to  Haseeb

You’re welcome! 

David
David
2 years ago

How i can place the slider circles in the bottom?

Gavit0
Gavit0
2 years ago

Thank you. I suggest to put some images with final result.

mikall
2 years ago
Reply to  Gavit0

Thanks for your input, Gavit0!  We appreciate you.

richardhobbs
1 year ago

Good Tutorial

I can’t quite get the text to align on right of the image instead of below

10
0
Would love your thoughts, please comment.x
()
x