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 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