| Drupal

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:

How to Build Drupal 8 Slideshows

  • 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

About the author

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.