How to Build Drupal Slideshow Using Views and Slick

One of our OSTraining members asked how it was possible to make multiple displays for Drupal 8 slideshows.

In this tutorial, I will show you how to build a slideshow that uses your article content type to make a slideshow with a teaser.

Step #1. Installing the Slick modules and libraries

First, we need to install the modules and libraries needed for our slideshow.

Install and enable the modules listed below. I would recommend Ddrush for installation “drush -y en slick slick_views slick_extras blazy” or manually:

• slick
• slick_views
• slick_extras
• blazy

Now your “Extend menu” should look like this:

Next, we need to install the library for slick

• Go to https://github.com/kenwheeler/slick/
• Click the Download ZIP button

• Extract the folder you just downloaded.
• Rename the folder to /slick/
• Upload the files to the /libraries/ folder in the root of your site. This is different from Drupal 7, so be careful.
• When you’re finished, your folder structure will look like this:

Step #2: Create the Slideshow

Now we’re going to use Views to create our slideshow:

• Go to Structure > Views > Add new view.
• Enter a “View name”.
• Click “Create a block”.
• For “Display format”, choose “Slick carousel” of “fields”.
• Click “Save and edit”.

In the fields section, add the other fields we want to use. In this case, we will be adding image, body and “Global: custom text”.

For the image field, select “link image to” and set it to content. Clicking on the image will now take us back to the content.

For the body field, select “Formatter” and set it to Slick Text.

Go down to “Rewrite Results” and set the “Trim”. In this example, I am going to use 300. This is how long the body text will be under the slideshow.

Now set the “title”, “image”, and “body” to be excluded from display. Because of the way Slick handles displays, we are going to use the “Global: custom text” to determine the order of our content.

Now set the “custom text”. Add:

{{ title }}

{{ body }}

Now we need to configure Slick. The red arrows point to the settings that you are most likely to update:

Now that we have finished configuring Slick, we need to alter the default pager options. Change the number of “items” to “0”, because this is all handled by Slick.

Step #3. Place the Slideshow Block

Now we have a slideshow that displays 3 articles at a time with a teaser of content that links back to our full content. Let’s add our block to the Block layout.

• Go to Structure > Block layout.
• Choose the region you want to use for your slideshow. In my example, I’ll use “Content”:

Now make sure to save the block layouts.

Step #4. Optimize the Images

Now that we have our slideshow working, let’s optimize the images so it is more consistent. You could now create an image style specifically for your slideshow which is explained here in our slideshow tutorial.

Or simply apply one of the predefined styles. Since we already have it documented, I will simply select one of the predefined styles.

Open the view to edit.

Select the image field and update the “image style”:

Now all the images should be restricted to a 220×220 display making the slideshow a lot cleaner.