How to Build a Drupal 8 Scrolling Text Slideshow

How to Build 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:

Insatlling Views Slideshow modules
Downloading jquery cycle library
  • 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 jquery cycle library to Drupal 8
  • Go to Structure > Content types.
  • Make sure you have a content type with an Image field attached:
A Drupal 8 content type with image field

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 Drupal 8 content type
  • 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.

Changing settings for a Drupal 8 slideshow

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

Changing the pager for a Drupal slideshow

  • 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”:
Bartik block placement
  • Find the block region you want to use and click “Place block”:
Placing a Drupal 8 block
  • Find the block that you just created and click “Place block”:
Place block in Drupal 8

Under “Pages”, choose which pages you want the slideshow to appear on:

Drupal 8 block visibility
  • 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:
Your new slideshow blocked placed in a region
  • Click “Save blocks”.
  • Go and see your slideshow published on your site:
Your final Drupal 8 slideshow with ticker


0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
TheTails Labs
TheTails Labs
7 years ago

Thanks for that

5 years ago

I create this, but only the first one is showing, the others are blank. It shows 5 bullets at the bottom of the screen when I use the “Pager” within the slide show. But only the first one shows the first time and then nothing ever again. Any idea why?

5 years ago

I have Image with alt and I want to show the Image and alt tag below image . How can I show both and scroll at once?

Would love your thoughts, please comment.x