General
A popular module to create slideshows with long history. Slideshows are normally placed on the front or landing page as a sliding banner to catch attention of viewers.
Video
Installation
Follow standard module installation procedure to install the basic modules. 2 sub-modules will be included:
- Views Slideshow
- Views Slideshow Cycle
Installation of previous versions of Views Slideshow were more simple and straight forward. Starting with 8.x-4.7 version of the module, the Views Slideshow Cycle sub-module requires the following JavaScript libraries:
| Javascript Library | Location to Place |
|---|---|
| jQuery Cycle 3.x | /libraries/jquery.cycle |
| JSON2 | /libraries/json2 |
| jQuery HoverIntent | /libraries/jquery.hoverIntent |
| jQuery Pause | /libraries/jquery.pause |
If these Javascript libraries are not loaded, the images will not rotate.
Refer to Drupal Documentation for details: Views Slideshow - Installation & Requirements
How to Use
Initial Build of Slideshow
- Set up a new Views as block
- Select Slideshow as the Format and Fields to show
- Perform settings of Slideshow accordingly
- Add Fields with the target images for the slideshow effect, and configure the image style accordingly
- Enter the Block Name in the Views setting, then save the Views after finished.
- Go to Block Layout @ /admin/structure/block
- Place the blocks created from Views into the target region. Configure visibility of block if necessary.
Linking Slideshow Images to Pages
Images in the slideshow can be linked to other pages, which is very common. Simply configure the link in Views under the Image field.
Overlay Text on Slideshow Images
It is quite common to overlay text on top of slideshow images. It is not straight forward setting. More experienced and a little bit of coding is necessary, but not too difficult. Refer to the YouTube video included in the references tab for details.
References
Cautions
It is not needed for the previous version. But for the 8.x-4.x module version under Drupal 8, remember to install the Javascript libraries as mentioned in the installation. Otherwise the images will not rotate.
Images for Reference
2 sub-modules
