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:

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.