A Complete Guide to Creating Animated Slideshow in Drupal 8

A Complete Guide to Creating Animated Slideshow in Drupal 8

Animations make websites vibrant and user-friendly. If you’ve designed your website using Drupal 8, you might be wondering if you can create animated slideshows. The answer is, yes, you can. There are a few modules that allow you to create slideshows with ease. You’d be able to set image ordering, speed of the frame, and effects during transition.

In this tutorial, learn how to create animated slideshows for your Drupal 8 website.

Step-by-Step Process

Here are the steps you need to take for this purpose:

Install Drupal 8 Modules and Add Image Content

The first thing you need to do is install the modules. You can install them using FTP, URL, Git, Composer, or directly upload the files. The modules necessary for creating animated slideshows are:

Views Slideshow



Execute these codes to install:

mkdir -p libraries/jquery.cycle && cd$_ && wget https://malsup.github.io/jquery.cycle.all.js

&& mkdir -p ../../libraries/jquery.hoverIntent && cd$_ && wget https://raw.githubusercontent.com/briancherne/jquery-hoverIntent/master/jquery.hoverIntent.js

&& mkdir -p ../../libraries/json2 && cd$_ && wget https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

In case you’re using cPanel or File Manager, you may be required to change the folder permission for /sites/default to 755. After this, you’d be able to create the …/libraries folder for JavaScript dependencies.

Once completed installing the libraries and their respective dependencies, proceed to creating Views. This requires creating a custom image content type along with a list of correlating Taxonomy terms.

When creating the new content type, here are the settings to apply:

No prompted to Front Page, Sticky at Top of Lists, or Revisions

No Comments

No Display of Author Name & Post Information

Again, you’d have to create a new content type and name it Slideshow Image. Then create an image field that will hold the image files to be used in the slideshow. Finally, it’s necessary that you specify the Thumbnail sizes.

Optional modules you may want to use are the Image Widget Crop & Crop API. These are preferred modules for those who want to crop images to meet the slideshow animation size.

Create a Block Using Views Slideshow

The next thing to do is create a Block. For this, go to Views and start with creating a new content filter. You need to select Views Slideshow as display.

In the Views Slideshow, you can change settings and configure aspects like frame speed, filter, and page turn effects. You’ll find settings for number and randomization in Views.

Here are the settings you should select for Views Slideshow:

Skin - Default

Effect - Fade

Slideshow Type - Cycle

Action - Pause on Hover

You can use slideshow animations for other purposes.

Create the jCarousel Animation in Block

For this tutorial and for demonstration purposes, the image change filter settings is the same across all the modules, namely, Views Slideshow, FlexSlider, and jCarousel.

So you should proceed with cloning the Views Slideshow Block and then create a new Views Block and set jCarousel as display.

Here are the settings we recommend to apply:

Wrap Content - Circular

Skin - Default

Number of Visible Items -Auto

Scroll - Auto

Save the changes you’ve made. You may want to compare the settings in jCarousel and Views Slideshow to adjust your web designs.

Prepare a Block for a FlexSlider Animation

Similarly, you’d have to create a FlexSlider Animation in a Block. Here are the settings we recommend to apply:

Option Set - Basic Carousel

Caption Field - Content:Title

It’s better to test your image slideshows and see how they appear with Views Slideshow, jCarousel, and FlexSlider as display engines. See which slideshow matches your requirements.

Then, go ahead and upload images for each slideshow size. Make the images ready for use in Panels & Blocks.

Embed Slideshow Blocks on Drupal Pages

Once you’ve created the slideshows, next step is to embed them in the web pages. You’d have to embed them for the header, footer, sidebar and other regions.

You’d have to use Panels & Block for positioning the slideshows. Use the three modules wherever required.

So that’s how you create and start using image slideshows animation for your Drupal 8 website. Which animation solution you adopt will be influenced by what theme and graphic design you’ve used and the image quality you expect.

For more assistance, get in touch with the customer support team.
First release
Last update
0.00 star(s) 0 ratings

More resources from kumkumsharma