How to Build a Drupal 8 Scrolling Text Slideshow

For one of our Drupal 8 projects with is related to news channel need an option to flash their main news title as a slider. Drupal 8 has lots of Slider modules and can use any of this. But the below is very quick and simple option show title text as a slider.

The main things we need to do for this into download and enable Views Slideshow and jQuery cycle library

Step 1. Getting set up with Views Slideshow

Download and enable the Views Slideshow module

  • Download the Drupal 8 version of the Views Slideshow module.

Download the jQuery cycle Library

  • Rename the downloaded folder to /jquery.cycle/
  • Upload the files to the /libraries/ folder in the root of your site. The Drupal 8 Libraries folder in the root itself and the structure is different from Drupal 7    

Step 2: Create the contents for the slider, if content type not exists make sure to create a new content type of use the existing content type.

Step 3: Create the new view for the slider display

  •     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" or any other with respect to our wish.
  •     Check the "View Transition Advanced Options" inside the view setting there we will get the below options
  •     Update "Timer delay" and "Speed" to fit your needs.
  •     Click Apply.
  •     Now select the number of items from the Pager display and set this to 0 items.
  •     Save the view.

Step 4: Place the slideshow block in the region where we need to list the block.

  •     Go to Structure > Block layout (admin/structure/block).
  •     Click "Place Block". option beside the region where we need to place the block.

If you are still having trouble configuring a custom field talk to a Drupal expert. Please fill in our Contact Us form and we will get back to you shortly.