How to create a slideshow in Drupal 8 - Swapps https://swapps.

com/blog/how-to-create-a-slideshow-in-drupal-8/

ABOUT US
(HTTPS://SWAPPS.COM
/WEBSITE-MAINTENANCE-
COMPANY-WASHINGTON-
DC/)
BENEFITS
(HTTPS://SWAPPS.COM
/BENEFITS/)

CLIENTS
(HTTPS://SWAPPS.COM
/NONPROFIT-WEB-
DESIGNER-DEVELOPER/)

CAPABILITIES
com/)
swapps.
(https:// (HTTPS://SWAPPS.COM
/AGILE-DRUPAL-
WORDPRESS-WEB-
DEVELOPER-IN-DC/)
BLOG (/BLOG)

(202) 660-2940
(TEL:2026602940)

GET IN TOUCH
(HTTPS://SWAPPS.COM
/CONTACT/)

Home (https://swapps.com/) » Blog (https://swapps.com/blog/) » Software Development (https://swapps.com

/blog/category/software-development/) » Web Development (https://swapps.com/blog/category/software-development
/web-development/) » Drupal (https://swapps.com/blog/category/software-development/web-development/drupal/) »
How to create a slideshow in Drupal 8

How to create a slideshow in Drupal 8

José Ariza (https://swapps.com/blog/author/jariza/) - July 15, 2020

Drupal 8 (https://swapps.com/blog/tag/drupal-8/)

1 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

Drupal 8 Slideshow (https://swapps.com/blog/tag/drupal-8-slideshow/)

One of the most used components in web design are slideshows. These
elements allow us to display several pictures and other kinds of information in
a compact and interactive way to our users. You may �nd them in almost all
kinds of websites and for several purposes: display products and o�ers, show
reviews and comments sent by other users, display pictures of a new project,
etc.
Sadly, they are not natively supported by Drupal 8. For this reason, I will show
you how to easily add slideshows support to your Drupal site to make it rock.
For this blog post, we will create a slideshow with famous quotes that we will
add to our sidebar. So, let’s start!

1. Install your Drupal site

I know it is obvious, but the �rst step is to install your Drupal site. For this
tutorial purpose, the standard installation will work �ne.

2. Install the Views Slideshow module

In order to support slideshows in our Drupal site, we will use the Views
slideshow module. Go to https://www.drupal.org/project/views_slideshow
(https://www.drupal.org/project/views_slideshow) in order to download it. Make

2 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

sure you download the Drupal 8 version. Then, go to /admin/modules/install

and upload the module.

You may also install it using drush.

After this, make sure the module is activated on your site. Go to /admin
/modules and activate the two related modules:

3. Add required JS libraries

The Views Slideshow module requires some JS libraries to work as expected.
Depending on what you are going to use, you may not need to install all of
them. However, we will do it for educational purposes.
Note: If you installed the module using drush, it will handle JS dependencies automatically.

Views slideshow requires three JS libraries: jquery cycle, jquery hoverIntent

and json2. You need to download them inside the libraries folder, adding a
subfolder for each one, like this:

You may �nd these libraries following these links:

3 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

https://malsup.github.io/jquery.cycle.all.js (https://malsup.github.io
/jquery.cycle.all.js)
https://raw.githubusercontent.com/briancherne/jquery-hoverIntent/master
/jquery.hoverIntent.js (https://raw.githubusercontent.com/briancherne/jquery-
hoverIntent/master/jquery.hoverIntent.js)
https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js
(https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js)
If you are using a unix based OS, you may run the following command:
1. mkdir -p libraries/jquery.cycle && cd $_ && wget https://malsup.github.io
/jquery.cycle.all.js && mkdir -p ../../libraries/jquery.hoverIntent && cd $_ && wget
https://raw.githubusercontent.com/briancherne/jquery-hoverIntent/master
/jquery.hoverIntent.js && mkdir -p ../../libraries/json2 && cd $_ && wget
https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

This command and more related information may be found in the module’s
README.txt �le.

4. Create a quotes content type

In order to populate the slideshow data, create a content type called quotes
that we will use to add the famous quotes we want to show in our site. Go to
admin/structure/types and click on add Content type. To ease this process for
the blog post, we will use the title �eld as the quote �eld. Fill the add content
type form like this:

I recommend deactivating the Display author and date information setting

although it is not necessary.

4 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

Once you have created the content type, remove the default `body` �eld and
add an `Author` �eld to it. These should be your content type �elds now:

Before continuing, make sure to add some quotes in order to make sure that
your slideshow is working once you have �nished this tutorial.

5. Create a basic slideshow view

As its name indicates, the views slideshow module allows us to create a view to
display the slideshow we want. Go to admin/structure/views and click on add
view. Then, use this con�guration to create our view.

Considering we are going to add these quotes in our site’s sidebar, we are

5 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

creating a block view. Make sure you select Slideshow as the display format
and Quotes as the content type of the block. You may also set the number of
quotes that will be displayed; for now, the default 5 is ok. Once your view is
con�gured, click on “save and edit”

6. Configure your slideshow block view

Once you are in the block settings, select title and author as the �elds to
display. Make sure to select plain text on both of them and to deactivate the
link to content on the title.

At the end of the page, you should see a preview of your slider. If everything is
working �ne, it should look something like this:

If you are having issues with the styling, you may need to update slides css
settings. You may do it on the blocks settings page, clicking on Format ->
Slideshow -> Settings. Deactivating Add views row classes should �x your
issues.

You may play with other settings to customize your block. Once you have
�nished, save your con�guration.

7. Add your new block to your site’s structure

6 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

We are almost done. We are only missing one detail: to display our block. For
this, go to admin/structure/block and place your block in the region you want
to. For our example, we will add it to our sidebar �rst. Simply search for the
region, click on “Place block” and search your new quotes block. Once you are
done, it should appear in your region.

And that’s it. After going to your site, you should see something like this:

In some simple steps, we were able to add a slideshow to our Drupal 8 site that
allows us to handle its content via the admin interface. But this is just a simple
example, using the Views Slideshow module, you may con�gure your block to
retrieve any kind of content: images, urls, etc. You only need to add the content
�elds you want to use to your content type and con�gure your block view to
retrieve them. The possibilities are limitless.
I hope this tutorial will help you to improve your Drupal (https://swapps.com
/blog/category/software-development/web-development/drupal/) site. If you
have any questions, feel free to leave them in the comments section. Happy
coding!

7 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

What do you think?

0 Responses

Upvote Funny Love Surprised Angry Sad

0 Comments Swapps � Disqus' Privacy Policy 

1 Login

 Favorite t Tweet f Share Sort by Best

Start the discussion…

LOG IN WITH OR SIGN UP WITH DISQUS ?

Name

Be the first to comment.

✉ Subscribe d Add Disqus to your siteAdd DisqusAdd ⚠ Do Not Sell My Data

 Drupal 8 (https://swapps.com/blog/tag/drupal-8/)
Drupal 8 Slideshow (https://swapps.com/blog/tag/drupal-8-slideshow/)

RELATED ARTICLES

Internal Networking: how to create alliances inside the office

(https://swapps.com/blog/internal-networking/)
(https://swapps.com
/blog/internal-
By Diana Reyes (https://swapps.com/blog/author/dianareyes/)- May 12, 2022

networking/
Networking: key points when preparing for an event (https://swapps.com
/blog/networking/)
(https://swapps.com
By Lina Mercado (https://swapps.com/blog/author/lmercado/)- May 10, 2022
/blog/networking/

8 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

Connect with Us

GET IN TOUCH (/CONTACT)

  
ps://www.facebook.com (https://www.instagram.com (https://www.linkedin.com (https://twitter
/swapps.co) /swappsco/) /company/web-smart- /swappsco
apps)

COMPANY

About us (https://swapps.com/website-
maintenance-company-washington-dc/)

Lab (https://swapps.com/lab/)

Jobs (https://swapps.com/jobs/)

Glossary (https://swapps.com/glossary/)

Contact Us (https://swapps.com/contact/)

SERVICES

Bene�ts (https://swapps.com/bene�ts/)

Capabilities (https://swapps.com/agile-drupal-
wordpress-web-developer-in-dc/)

Clients (https://swapps.com/nonpro�t-web-
designer-developer/)

CONNECT WITH US

9 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

Instagram (https://www.instagram.com
/swappsco/)

Facebook (https://www.facebook.com
/swapps.co)

LinkedIn (https://www.linkedin.com/company
/web-smart-apps)

Twitter (https://twitter.com/swappsco)

Blog (https://swapps.com/blog/)

NEWSLETTER

Get the best tips on website/app strategy and marketing

straight to your inbox!

Email address

SEND

results@swapps.com (mailto:results@swapps.co

m)

Located in Ashburn, VA

10 of 11 5/14/2022, 12:20 PM
How to create a slideshow in Drupal 8 - Swapps https://swapps.com/blog/how-to-create-a-slideshow-in-drupal-8/

(202) 888-2733 (tel:2028882733)

11 of 11 5/14/2022, 12:20 PM