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:
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.
Thank you so much for this tutorial. I was able to replicate it without any other issue.
Thanks, Sandra, Let us know if you are interested in any other tutorials. 🙂
Great work Sandra
Slick seems pretty cool. Versatile and complete options, incl. mobile touch and desktop drag support.
Maybe comparable to the famous “Owl Carousel”? Which one would you prefer?
That’s easy right now – there’s no Drupal 8 release for Owl Carousel
There is one, but it’s not hosted in the usual Drupal projects. I found it by accident. It is on Github made by a themeforest author called “tabvn”:
[url=https://github.com/tabvn/owl]https://github.com/tabvn/owl[/url]
Related Youtube videos:
[url=https://www.youtube.com/playlist?list=PLoNOZG9us1QD_WU2SMxs4XDJnvxcXoUfN]https://www.youtube.com/pla…[/url]
This page isn’t available. Sorry about that.
Try searching for something else.
the above link is wrong
I did make some great progress from this tutorial, I do have 1 question. In Step 2 under the item “Configure Field Content: Body” I do not have the option to use the “Slick Text” option, it just doesn’t show up at all. Am I missing part of the module?
]https://www.ostraining.com/…[/url]
[url
Hi Richard,
Check that the libraries are installed correctly. It is usually displayed in the status page if they are not configured correctly.
Thanks
Daniel
The library files are not in the correct place if it is not letting you change the Formatter
I made it through all the tutorial, but I don’t find any place where it’s said to upload and/or add the pictures to the slideshow, can somebody help?
Would you be able to, at some point down the line, elaborate a little more on this and create a slick slideshow that uses either other images attached to the image field or an additional image field type as thumbnail navigation below the main image? So that when you click on the thumbnail, it loads in the main container?
Hi Anthony, many of the tutorials we make are at the request of our users.
The tutorial went smoothly up to “Now set the “custom text”. Add:
{{ title }}
{{ body }}
Also, in D. 8.30 the Configure Field: Global doesn’t appear.
And Slick’s UI seems different.
Thanks for reporting the issue Daniel will check this.
I am using Drupal 8.3.7, and I found that I had to choose “Global” in the category dropdown, and then choose “Custom Text”. (Remember, you were told to create “three” fields. (I had trouble with this, too: You have to add that field first).
Thank you very much! You explain very good plus great pics so even an old fool like me understand most of it! 🙂
Thanks for the kind words Sven
Please let me know how to remove any gap/margin between the slides!!! [url
]https://uploads.disquscdn.c…[/url]
Hi John,
You need to check the CSS for the view and decrease the padding.
Thanks
Daniel
Dear Daniel,
Would you elaborate “the CSS for the view”? … are you referring to 1) theme’s css “style.css” 2) slick module’s “slick.theme.css” or 3) in library slick folder “slick-theme.css” 4) orin library slick folder “slick.css” I tried 2) and 3) …did not work … thanks ..
Dear Daniel,
Would you elaborate “the CSS for the view”? … are you referring to 1) theme’s css “style.css” 2) slick module’s “slick.theme.css” or 3) in library slick folder “slick-theme.css” 4) orin library slick folder “slick.css” I tried 2) and 3) …did not work … thanks .. John
Hi John the best way to find the CSS responsible is to inspect the element and then create the updated the CSS with the inspection tool. Then copy the code changes and save them into your themes custom CSS this should override all other CSS options.
Thanks
Daniel
Is it possible to use slick and achieve the function of Theia Post Slider [url=https://codecanyon.net/item/theia-post-slider-for-wordpress/2856832]https://codecanyon.net/item…[/url] ?
If yes, how? If not, how can i achieve that in drupal 8?
Thanks
thanks for the tutorial, but i surely miss something, slick work proprely but they display everything of my site text and image, can we set a directory to store image we wish to be display
I got hung up on the part where we created three fields. This part was not easy to understand (had to read it 6-8 times (I suggest sticking to the step-by-step method). (i.e First: this field (settings), then this fields (configs), and finally the last one (here are the settings).
(Still don’t know how “teaser” and “articles” come into play here – are we actually using a “teaser” display mode (see: [url=https://www.drupal.org/node/514318)?]https://www.drupal.org/node…[/url] Or is that just what you are calling it?) . In which step did we set up a teaser?
“Articles”? (I assume that you are calling image content types “articles” for some reason?)
Nothing shows up on my page. 12+ hours trying. I give up.
At this point you’ve lost me:
“Now we need to configure Slick. The red arrows point to the settings that you are most likely to update”
I can’t find the screens you’ve provided.
I’m using Drupal 8.3.4
Hi! I lost too!!
This step missing one point:
After click in [Apply] go to the View Screen and click in Configuration of Slick Carousel
====================================
FORMAT
Format: Slick Carousel | Configuration
====================================
how to use this module with twig generated slideshows. it doesnt seem to work e.g. i have twig html that manually creates the slideshow … how do i include the slick min files located in libraries folder etc.
Hi Guys, I am new to Drupal. I tried this Tutorial to create the Slideshow everything I did correct. But, I don’t know how to add that content to get the Slideshow as shown in Step -3. Can someone please help on this ?
For the image field, select “link image to” and set it to content….. I can’t find this .. i am using D8
I also have this same exact issue. Im using drupal 8.6.13 with Lightning distro
This tutorial is the best that I found to get Slick working in D8. However the slideshow I seek is pure images rather than a slideshow of my site content. Can you update this one or compose another step-by-step to do a pure image slideshow? Thank you in advance!
Hi. Thank you for this extremely helpful tutorial. Can you please clarify how to have the slides be clickable so that clicking on a slide takes you to a URL you specify when adding an image to the slideshow?
The problem with all this, is how to make the slider full screen width and responsive? Not medium 220px X 220px, this is highly inefficient
No way. I did all well just before “Now we need to configure Slick. The red arrows point to the settings that you are most likely to update:” But cant go further of this point. I have the slideshow in my main page, but no images on it. Any idea?
Hello,
Thank you very much for your turoriel. I followed him to create my slideshow with slick, but I have a problem with that.
In fact, everything works fine with the preview in the administration panel. But when I insert the view into a bock, it doesn’t appear on the front page. I also tried to create a page with the view and when I display the page too, the slides do not appear. Do you happen to know why? Thank you for helping me.
my content types have multiple image fields in them. How do I get Slick to go through and display all the images in each content node? I want two images displayed side-by-side. Currently what I see is the first image of two different nodes of the correct content type. (I have 3 nodes total thus far). My slideshow is not sliding, either by the multiple images in each node, or by the node.
Finally, now one must use Composer to install things. Composer did not install the slick or blazy libraries for me.
Turning autoplay on started the slideshow. I redid the content type so it is one image per node, and everything works, but this is a pain.
This didn’t work at all until I manually put the Blazy folder inside the libraries folder. I’m curious as to how anyone else got it working without doing this? Did this tutorial accidentally skip over this step?
Hi Daniel,
Great tutorial, but I get “blazy is not defined” error in console. Maybe you need to add a step to configure blazy. Does it need to be added to the /libraries folder? Are other steps needed to solve the error? It seems that the slick carousel does not work without blazy, seems like you should have the choice to add it or not.
Hi, I have created a slideshow based on the instructions that you have given. My site runs on Drupal 8.9.2 and using the Business theme. The slideshow works well in the maintenance mode, however, when I put the site online, it disappears. Any help is much appreciated.
Please [url=https://www.ostraining.com/blog/drupal/how-to-use-the-slick-module-in-drupal-8/]check out this newer blog[/url] about the Slick Module for Drupal 8. Perhaps you will find a solution there. If not, let us know, and we will investigate your issue further.
Thanks Daniel for creating this tutorial. I think I have this correct but I’m getting this error after all said and done:
Uncaught ReferenceError: Blazy is not defined
Clues?
Very good tutorial ! Thank you
You’re very welcome!