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

Instructor

  • 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
Blog Rating
Subscribe
Notify of
58 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
IAmThatStrange Really

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

@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

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

IAmThatStrange Really

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

It definitely isn’t fully stable yet.

IAmThatStrange Really

Yeah and as a software tester, I break everything 🙂

bhjk

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

Jeet

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

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

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

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

thanx ..really helpful

Nick

You’re very welcome, Bipin! 🙂

Steven Corneillie

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

Your Pro Tip bailed me out. Thank you.

steve

@robert_mckelvey That’s great to hear. Thanks!

Brian

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

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

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

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

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

@andypetran Thanks for leaving that idea

zulfin kureshi

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

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

Ramya

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

Hi Ramya
Check your pager settings in the view.
Thanks

Daniel

Ramya

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

daniel-pickering

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

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

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

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

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

Ramya

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

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

please help me

daniel-pickering

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

Hamed Bohloul

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

please help me for find this option

NickWilde

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

steve

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

TRXDev

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

danielpickering

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

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

Jairaj saro

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

danielpickering

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

Jairaj saro

everything is correct but still not working

yeah right

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

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

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

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

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

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?

Dennis

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

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

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

Raksha

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

manikanta

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

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

Alex Seif

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