How to Build Drupal 8 Slideshows

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:

  • 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:
Uploading the jQuery files for views slideshow
  • 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:
Drupal content type with image

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”.
Creating a slideshow view
  • 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”.
Adding fields to views slideshow
  • 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.
A views slideshow block published in Drupal 8

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”:
Placing a Views Slideshow block
  • Find the block region you want to use and click “Place block”:
Placing a Views Slideshow block in Drupal 8
  • Find the block that you just created and click “Place block”:
Placing a Views Slideshow block in Drupal 8
  • Under “Pages”, choose which pages you want the slideshow to appear on:
Placing a Views Slideshow block in Drupal 8
  • 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:
 Views Slideshow blocks in Drupal 8
  • Click “Save blocks”.
  • Go and see your slideshow published on your site:
A published Views Slideshow in Drupal 8

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”.
new image style for Views Slideshow in Drupal 8
  • Choose an image effect. In my example, Resize will guarantee that all the images are the correct size:
resize image effect for Views Slideshow in Drupal 8
  • 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:
editing a Views Slideshow in Drupal 8
  • Under “Fields”, click on your image field to edit it.
  • Set “Image style” to the style you just created.
Views Slideshow in Drupal 8 with an image style

Save your view and visit the front of your site. Your slideshow should be working:

A working Views Slideshow in Drupal 8

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

Views Slideshow field settings

You’ll now be able to add controls to your slideshow, including Previous / Next buttons, a counter, and a pager:

Views Slideshow advanced options

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
guest

58 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
IAmThatStrange Really
IAmThatStrange Really
8 years ago

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?

steve
steve
8 years ago

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

IAmThatStrange Really
IAmThatStrange Really
8 years ago
Reply to  steve

Thank you for the quick reply. I’ll check all the parms again.

IAmThatStrange Really
IAmThatStrange Really
8 years ago
Reply to  steve

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.

steve
steve
8 years ago

It definitely isn’t fully stable yet.

IAmThatStrange Really
IAmThatStrange Really
8 years ago
Reply to  steve

Yeah and as a software tester, I break everything 🙂

bhjk
bhjk
2 years ago

you think u are bad. I managed to break PHPMyAdmin and 13 drupal sites. my next mission is the command line.

Jeet
Jeet
8 years ago

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

Nick
7 years ago
Reply to  Jeet

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] ?

Rick_P
Rick_P
8 years ago

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.

Nick
7 years ago
Reply to  Rick_P

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]

Bipin
Bipin
7 years ago

thanx ..really helpful

Nick
7 years ago
Reply to  Bipin

You’re very welcome, Bipin! 🙂

Steven Corneillie
Steven Corneillie
7 years ago

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

Robert McKelvey
Robert McKelvey
7 years ago

Your Pro Tip bailed me out. Thank you.

steve
steve
7 years ago

@robert_mckelvey That’s great to hear. Thanks!

Brian
Brian
7 years ago

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

Nick
7 years ago
Reply to  Brian

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.

Daniel Demesmaecker
Daniel Demesmaecker
7 years ago
Reply to  Nick Savov

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)

Nick
7 years ago

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]

Andy Petran
Andy Petran
7 years ago

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.

steve
steve
7 years ago
Reply to  Andy Petran

@andypetran Thanks for leaving that idea

zulfin kureshi
zulfin kureshi
7 years ago

I am begginer for drupal 8. I have issue that slide images are not showing as slider but they are appearing in grid form.

satyam patel
satyam patel
3 years ago
Reply to  zulfin kureshi

select slideshow in format setting under views you must have selected html grid so look into it.

Ramya
Ramya
7 years ago

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…

daniel-pickering
7 years ago
Reply to  Ramya

Hi Ramya
Check your pager settings in the view.
Thanks

Daniel

Ramya
Ramya
7 years ago

Thanx Daniel,
My pager settings is as shown in screen shot

daniel-pickering
7 years ago
Reply to  Ramya

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

Ramya
Ramya
7 years ago

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)

Ramya
Ramya
7 years ago
Reply to  Ramya

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.

Ramya
Ramya
7 years ago
Reply to  Ramya

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.

daniel-pickering
7 years ago
Reply to  Ramya

Hi Ramya if you still need help we do offer a free trial on support at OSTraining.

Ramya
Ramya
7 years ago

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.

Hamed Bohloul
Hamed Bohloul
7 years ago

I have not slideshow in display format fo block display setting!

please help me

daniel-pickering
7 years ago
Reply to  Hamed Bohloul

Hi Hamed if you still need help we do offer a free trial on support at OSTraining.

Hamed Bohloul
Hamed Bohloul
7 years ago

I have not slideshow in display format fo block display setting!

please help me for find this option

NickWilde
NickWilde
7 years ago

If you enabled the module via drush it will automatically download both jquery cycle and the other required/suggested JavaScript libraries.

steve
steve
7 years ago
Reply to  NickWilde

Good point, Nick. Drush users will find this easier.

TRXDev
TRXDev
7 years ago

Help me sir, how to insert the image ?i mean in html post or in post image uploader ?

danielpickering
7 years ago
Reply to  TRXDev

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

TRXDev
TRXDev
7 years ago

you mean add field in content/ new content type sir ? like this ?

Jairaj saro
Jairaj saro
7 years ago

i created slideshow with three images but slide show is moving Can u pls help to overcome this problem

danielpickering
7 years ago
Reply to  Jairaj saro

Hi Jairaj
From step 5 check your slideshow settings options.
Daniel

Jairaj saro
Jairaj saro
6 years ago

everything is correct but still not working

yeah right
yeah right
6 years ago

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?

steve
steve
6 years ago
Reply to  yeah right

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.

yeah right
yeah right
6 years ago
Reply to  steve

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.

Aaron Madhavan
Aaron Madhavan
6 years ago

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?

Eric
Eric
6 years ago

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

Eric
Eric
6 years ago
Reply to  Eric

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

Андрей
Андрей
6 years ago

Hey. Thank you for the article. Can you please tell me how to replace the “previous” / “next” text with the appropriate icons?

Dennis
Dennis
6 years ago

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

Kristen
Kristen
5 years ago

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?

Ptmp727
Ptmp727
5 years ago

I do not have any such Libraries folder and I am using the latest version of Drupal just installed a few days ago

Raksha
Raksha
5 years ago

How to make keyboard next and previous arrows to work as next and previous slide controllers.

manikanta
manikanta
4 years ago

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

Ameer
Ameer
4 years ago

Try this new Drupal 8 module with configurable layers in slide.

Alex Seif
Alex Seif
3 years ago

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

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