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:
- Download the Drupal 8 version of the Views Slideshow module.
- Install and enable the module.
- Go to https://github.com/malsup/cycle
- Click the Download ZIP button as seen below:
- 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: