How to Build a Drupal 8 Scrolling Text Slideshow

Parent Feed: 
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

About the author

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

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web