How to Build a Drupal 8 Scrolling Text Slideshow

An OSTraining member asked us how to create a CNN / BBC-style news site, with a breaking news ticker. 

In this tutorial, I'll show you how to build a slideshow in Drupal 8 that uses text rather than images.

If you're using Drupal 7, we have a version of this tutorial for you.

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:

• 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".

• Select Slideshow settings from the format section.
• In Cycle Options change the Effect from fade to "scrollLeft".
• Click "View Transition Advanced Options".
• Update "Timer delay" and "Speed" to fit your needs. In this case, I will change both to 600.
• Click Apply.

• Now select the number of items from the Pager display and set this to 0 items.

• Save the view.

You will notice that the preview inside Views does not work yet. Don't worry, everything should work correctly after the next step.

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:

About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.