How to Build Drupal 8 Slideshows
If you’re getting started with Drupal 8, there are some key features you’ll need to master.
You’ll probably want to learn how to set-up calendars, contact forms, comments, multi-lingual sites and of course, slideshows.
In this tutorial, I’ll show you how to build your first Drupal 8 slideshow.
Step #1. Getting set up with Views Slideshow
First, we need to install the modules and libraries needed for our slideshow:
- Download the Drupal 8 version of the Views Slideshow module.
- Install and enable the module.
- Go to https://github.com/malsup/cycle
- Click the Download ZIP button as seen below:
- Extract the folder you just downloaded.
- Rename the folder to /jquery.cycle/
- 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:
- Within directory, libraries create directory named jquery.hoverIntent
- Download the latest version of the JQuery hoverIntent plugin
- Place it inside the jquery.hoverIntent directory.
Now you can go back to your Drupal site and start setting up the slideshow:
- Go to Structure > Content types.
- Make sure you have a content type with an Image field attached:
Step #2. Create the view
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 “Slideshow”.
- Click “Save and edit”.
- On the left-hand side, look for the “Fields” area. Only “Content: Title” will be showing.
- Click “Add”.
- Search for your image field and choose that field.
- Click “Add and configure fields”.
- Click “Apply”.
- Scroll down to the Preview area at the bottom of the page and you will see that the image has been added.
- Click “Save” to finish creating your View.
Step #3. Publish your slideshow block
Now let’s publish our View so that people can see it:
- Go to Structure > Block layout.
- Click “Demonstrate block regions”.
- Choose the region you want to use for your slideshow. In my example, I’ll use “Content”:
- Find the block region you want to use and click “Place block”:
- Find the block that you just created and click “Place block”:
- Under “Pages”, choose which pages you want the slideshow to appear on:
- Click “Save block”.
- If your chosen block region has multiple regions, make sure your block is correctly placed. In this case, I want it at the top:
- Click “Save blocks”.
- Go and see your slideshow published on your site:
Step #4. Create image styles for your slideshow
At the moment our images are all different sizes and don’t fit into the block region. Let’s create an image style to ensure that all the images have the correct size.
- Go to Configuration > Image styles > Add Image style.
- Enter an “Image style name”.
- Enter a “Machine readable name”.
- Click “Create new style”.
- Choose an image effect. In my example, Resize will guarantee that all the images are the correct size:
- Choose a Width and Height for your images. This will depend on the size of the block region you’ve chosen.
- Click “Update effect”.
- Go back to edit your View:
- Under “Fields”, click on your image field to edit it.
- Set “Image style” to the style you just created.
Save your view and visit the front of your site. Your slideshow should be working:
Pro tip: if you need help to make your slideshow responsive, enable the “Responsive images” module in the Drupal core. That will provide more image style options under Configuration > Responsive image styles.
Step #5. Add controls to your slideshow
Finally, let’s add some controls so that our slideshow is easier for visitors to navigate:
- Go back to edit your view again.
- Under Format, click “Settings” next to Slideshow”.
You’ll now be able to add controls to your slideshow, including Previous / Next buttons, a counter, and a pager:
Thank you so much, this was very helpful! I do have one question. It all worked great except the first row in the slideshow is blank. I checked all the parms I could think of. Actually deleted and re-uploaded all the image. But it’s still blank. How to fix this?
@iamthatstrangereally There’s no easy answer to that. It’s likely due to a node that lacks an image, or perhaps due to a mistake in your Filter Criteria.
Thank you for the quick reply. I’ll check all the parms again.
I know what happened, whether or not it was a configuration issue I don’t know but I replicated it. I had gone in and edited the content, and saved. That’s when the first blank slide showed up (although I did not know it at the time). It was when I went back into the content, edited it again and then two blank slides showed up. Curious I went back into the content and saved again (didn’t change anything), three blank slides appeared. Did it one more time and 4 blank slides showed up.
I then deleted the content and recreated it. No blank slide/row.
No clue why that happened or if I should list it as a bug.
It definitely isn’t fully stable yet.
Yeah and as a software tester, I break everything 🙂
you think u are bad. I managed to break PHPMyAdmin and 13 drupal sites. my next mission is the command line.
HI
How can i load collection field item as slideshow for the node?
When i implement this module its showing all field collection on node page.
How can set? its show only current node’s field collection items.
Thanks & Regards
Jeet Patel
Hi Jeet,
Good questions. We would love to help you with this. Could you sign up for one of our affordable support plans at [url=https://www.ostraining.com/pricing]https://www.ostraining.com/…[/url] ?
This is great, thank you. I haven’t been able to break anything yet but I haven’t used it much yet either. I’ll play with it some more (configuration, etc.) and report back if I find anything useful for others.
One thing I did run into was enabling responsive images. No matter what setting I use in the configuration it still refuses to work. I’ll keep you posted if I figure it out.
Hi Rick,
Glad you found it helpful!
Please consider signing up for our support and our Drupal tech will be able to help quickly. As you can see, our prices are very affordable:
[url=http://www.ostraining.com/pricing]www.ostraining.com/pricing[/url]
thanx ..really helpful
You’re very welcome, Bipin! 🙂
Hi Steve, great tutorial, thx
everything is working except the slideshow. It shows only the latest image as banner.
I use Zircon as template
Any tips? Thank you
Your Pro Tip bailed me out. Thank you.
@robert_mckelvey That’s great to hear. Thanks!
Thank-you for the tutorial. I have followed your instructions carefully but I have not been successful in getting the Slideshow to work. I get each picture displaying one below the previous one and not on top of the previous one as it should. Please could you tell me what I’m doing wrong. Thanks
Hi Brian,
We’d be glad to help. Please sign up for one of our very affordable support plans and our Drupal tech can take a look for you:
[url=https://www.ostraining.com/pricing/]https://www.ostraining.com/…[/url]
Looking forward to helping.
Your article was verry helpfull, but I have stil 3 questions…
1. I created a contenttype to select the content I wanted to show, is there a way to remove the fieldlabel?
2. How do I remove the rssfeed on the bottom of my view?
3.Aplying imagestyles didn’t work, how do I make my view responsive (I tried to enable the responsive module but got an error) or at least center it in the page (I gave all my images a fixed with and hight for the moment)
Hi Daniel,
Good questions! Our paid support could help with those. We have 2-day free trials available at [url=https://www.ostraining.com/pricing/]https://www.ostraining.com/…[/url]
This tutorial is the best one i’ve found yet! However, I had still had some trouble that I eventually figured out. I wanted to make a simple slideshow of images on my frontpage, but when configuring the view, I couldn’t figure out how to get my images (and ONLY my selected images) to appear as a valid field to add. Eventually I realized (and there may be an easier way to do this) I needed to make a new content type, and then add an image field to that content type that allowed multiple image uploads. Then when configuring the slideshow view, I made sure that ONLY that specific new content type was being filtered through, and selecting the new image field within that new content type. THEN I needed to uncheck ‘Display all values in the same row’ in the ‘MULTIPLE FIELD SETTINGS’ dropdown menu when configuring the field. Only then did the image slideshow work! None of these things were covered in this (still the best one I found) tutorial, so i’m guessing i missed something really simple and created a much more complicated work-around.
@andypetran Thanks for leaving that idea
I am begginer for drupal 8. I have issue that slide images are not showing as slider but they are appearing in grid form.
select slideshow in format setting under views you must have selected html grid so look into it.
I have created view slide show in drupal *.1.8.
The problem I am facing is images changes only when I rebuild.
I hav eincluded jquery.cycle in libraries…/sites/all/libraries/jquery.cycle..
but still single image per rebuild….
or when i edit view n click update view image chnages…
Could u help in this…
Hi Ramya
Check your pager settings in the view.
Thanks
Daniel
Thanx Daniel,
My pager settings is as shown in screen shot
Under format slideshow settings have you configured the options ?
I’d also added the mini pager to the pager settings.
If you require some more direct assist we do offer support through OST. [url=https://www.ostraining.com/welcome-support/?utm_source=ostrainingcom&utm_medium=banner&utm_campaign=mainmenu]https://www.ostraining.com/…[/url]
Thanks
Daniel
Thnx a lot for such a quick reply….
But i dont want any pager ….
It is still not working and I thnk it must be related to jquery…either jquery cycle or jquery update(not avail in drupal 8 for updation)
Hello Daniel this screenshot could help you.
I get “:The website encountered an unexpected error.Please try again…”,when I click on the help of view slideshow cycle.
Hi Dear ,
I tried slideshow by moving the jquery.cycle to /libraries instead of /sites/all/libraries.
It started working atleast in preview page but not on main page.
But the thing is y not in /sites/all/libraries coz superfish requires that /sites/all/libraries.
Ain’t this a problem.
Hi Ramya if you still need help we do offer a free trial on support at OSTraining.
Thnx a lot.Right on I am working on another high priority project.Will get back to u as soon as start working on Drupal again.
With regards.
I have not slideshow in display format fo block display setting!
please help me
Hi Hamed if you still need help we do offer a free trial on support at OSTraining.
I have not slideshow in display format fo block display setting!
please help me for find this option
If you enabled the module via drush it will automatically download both jquery cycle and the other required/suggested JavaScript libraries.
Good point, Nick. Drush users will find this easier.
Help me sir, how to insert the image ?i mean in html post or in post image uploader ?
The images are loaded from the content type. So for the content type you create go to add content and add the images you need.
Thanks
Daniel
you mean add field in content/ new content type sir ? like this ?
i created slideshow with three images but slide show is moving Can u pls help to overcome this problem
Hi Jairaj
From step 5 check your slideshow settings options.
Daniel
everything is correct but still not working
Caution, this is not a production-ready slideshow solution
I was excited to discover this article, but after losing several hours attempting to implement it I must advise other developers to steer clear. At least for the time being. This views_slideshow module solution isn’t production-ready because:
– The article above is missing numerous steps and details.
– At least one of the steps above is simply incorrect, misleading if you prefer
– I didn’t see a method for selecting imagery already in my media gallery. As reviewing the other comments will indicate, that users might want to select which images display in the slideshow was apparently never considered. One person found a workaround, but still
– A dependency not properly identified above (the Libraries API – it’s identified in what I think is one of the subscriber-only videos) is even further-removed from production readiness, currently it’s still being ported to D8 and is declared to be unusable on 8.x.
I’m migrating a site for a paying client, I can’t afford to horse around with buggy, unfinished modules, the current implementations of which might break once “usable” versions are rolled out. Neither should anyone else. My client is unlikely to understand and won’t want to pay for rework, I don’t want to introduce that technical debt in the first place.
Take the /libraries/ folder location description above, for example… it isn’t really in the site’s document root location, is it? Even if your writeup were 100% complete and perfect, the modules and at least one of the dependencies are still not production-ready.
You should seriously consider pulling this article down and correcting the numerous issues I’ve barely scratched the surface of. Put in stronger warnings and disclaimers at the very least. Also, why not restore the original published date and install a “last updated” date?
I’m just going to leave this comment up. If it’s useful to other readers … great.
But being rude and anonymous is no way to get our help.
I tried to be informative while steering clear of being rude. If I failed at that, my apologies.
I think you’ll agree that my comment goes beyond the requests for help that have been posted earlier. I chose pseudo-anonymity because comments are ran by Discus, whom I distrust, so I would curate the identity exposed to them anyway.
Like I said, I’m not interested in coercing a 7.x dependency module or using an 8.x version that isn’t yet considered stable enough to be usable, on a production site.
I was wondering how you can use this if you want multiple slideshows? I have created a new content type, but the slideshow is pulling in all images from that slideshow. Is there a way to pull in based on the post type and a taxonomy?
I believe there is an error in this tutorial for Drupal 8.4.4 and Views Slideshow 8.x-4.6 Stable release released 18 November 2017
Step #2. Create the view. – For “Display format”, choose “Slideshow”. (This option does not exist in the drop down).
I solved the mystery, for some reason the views slideshow module wasn’t installing. Today after a server reboot it installed and now the Slideshow option is available
Hey. Thank you for the article. Can you please tell me how to replace the “previous” / “next” text with the appropriate icons?
For step 5, I cannot perform this step, Under Format, click “Settings” next to “Slideshow”. There isn’t any “Slideshow option”. I only managed to see Skin: Default and Slideshow Type:Cycle
I was able to accomplish this successfully, thanks so much for all the detail! Quick question, I’d like to link certain carousel images to pages within my site. How would I do that?
I do not have any such Libraries folder and I am using the latest version of Drupal just installed a few days ago
How to make keyboard next and previous arrows to work as next and previous slide controllers.
if i keep 3 items per page and total slide items are five ,but it is showing 5 page counters(bullets) can u suggest any idea
Try this new Drupal 8 module with configurable layers in slide.
Hello, how can I add a l link to the slideshow??
I’ve added the field, but can’t seem to wrap it around the elements