How to Make a Slideshow with Drupal Views Slideshow

September 02, 2019Andrew Miller

If you are professional in creating a slideshow, you must hear about Drupal Views Slideshow. As you can tell, Views Slideshow can create slideshows out any content on your Drupal site, whatever the content is images, images on content or full rendered entities. But the way to use Drupal Views Slideshow to build up your own slideshow is not so easy as you wonder. If you don't know how to make a slideshow with Drupal Views Slideshow clearly, you can read this article to get the detailed tutorial.

Drupal Views Slideshow

Part 1: How to Download and Setup Drupal Views Slideshow
Part 2: Detailed Guide to Build a Drupal Views Slideshow

Part 1: How to Download and Setup Drupal Views Slideshow

Before creating a slideshow with Drupal Views, you need to download it on your computer and set up it. If you don't know how to download it and set it up clearly, you can follow the next steps.

Step 1:

First, you need to install the required modules and libraries which are needed for your slideshow. Here you need to download the Drupal 8 version of the Views Slideshow module.

Step 2:

Then install the module and enable it.

Step 3:

Then go to https://github.com/malsup/cycle and click the "Download Zip" button.

Step 4:

Choose the folder you want to download and rename the folder to /jquery.cycle/. Next upload the files to the /libraries/ folder in the root.

Step 5:

In directory, libraries will create a directory called jquery.hoverIntent. You need to download the latest version of the JQuery hoverIntent plugin. When it is downloaded, you should place it inside the jquery.hoverIntent directory.

Step 6:

At this point, you can go back to your Drupal site and begin setting up your slideshow as you want. Here you need to go to "Structure" and then select "Content" types.

Part 2: Detailed Guide to Build a Drupal Views Slideshow

To create a slideshow with Drupal Views Slideshow, in what follows are the detailed steps we provide for your reference.

Step 1:

Create the view

To use Drupal Views Slideshow to create slideshow, you need to click "Structure" and choose "Views". Then select "Add New View" to create a new one. Then enter a view name and tick the box before "Create a block". In Display format section, you need to select "Slideshow" from the drop-down list. When these steps are done, click "Save" and edit to go to the next steps.

Then look for the "Fields" section on the left part of the interface. And it will only show you Content: Title. Just click "Add" button in this section. Next search for your image field and choose that field in this step. After that, click "Add" and configure fields, then choose "Apply".

At this point, you need to scroll down to the "Preview" part which is at the bottom of your page. Here you can see the image you chose has been added. Just click "Save" button to finish creating your Slideshow.

Step 2:

Publish slideshow block

After you create your own View with Drupal Views Slideshow, you can publish it. To do that, choose "Structure" again and select "Block" layout. Then click on "Demonstrate" block regions and choose the region of region you want to use, such as Content.

Then find the block region you want to use and click "Place block" button which is at the left of "Content". Next find the block that you create right now and press "Place block".

In Visibility section, choose "Pages" firstly, then choose which pages you want your slideshow to appear on. When it is done, click "Save block". Just go and see your slideshow which is created by Drupal Views Slideshow on your site.

Step 3:

Create image styles

If your images are in different sizes and don't fit the block region. You can create image styles for your Drupal Views Slideshow, so that you can easily ensure all the images have the correct size. Just go to Configuration > Image styles > Add Image style, and enter an image style name into the text field. You also need to enter a Machine readable name, then click "Create" new style button which is in blue to create a new image style.

Then in "Effect" section, choose an image effect as you want. Here we choose "Resize", which can guarantee that all your images are the correct size. Then choose a Width and Height and click "Update" effect. After this step, go back and click "Edit" view, and click your image filed under fields. Don't forget to save your adjustment and see your Drupal Views Slideshow in your site.

Conclusion

In this article, we introduce Drupal Views Slideshow in detailed for you. And if you want to build a slideshow with Drupal Views, you can also refer to this article and follow the ultimate guide we write down for you. It can be a little difficult to use this software. Be patient and hope you can gain what you want from this article.

What do you think of this post?

Excellent

Rating: 4.6 / 5 (based on 84 votes)Follow Us on

How to Make a Slideshow with Drupal Views Slideshow

Part 1: How to Download and Setup Drupal Views Slideshow

Part 2: Detailed Guide to Build a Drupal Views Slideshow

Support

Get Our Newsletter